patternfly_yew/components/
brand.rs

1//! Brand visual
2use yew::prelude::*;
3
4/// Properties for [`Brand`]
5#[derive(PartialEq, Properties)]
6pub struct BrandProperties {
7    pub src: AttrValue,
8    pub alt: AttrValue,
9
10    /// Additional style
11    #[prop_or_default]
12    pub style: AttrValue,
13
14    #[prop_or_default]
15    pub children: ChildrenWithProps<BrandSource>,
16}
17
18#[derive(Clone, PartialEq, Properties)]
19pub struct BrandSourceProperties {
20    #[prop_or_default]
21    /// media selector
22    pub media: Option<String>,
23    /// source
24    pub srcset: AttrValue,
25}
26
27#[function_component(BrandSource)]
28pub fn brand_source(props: &BrandSourceProperties) -> Html {
29    html!(
30        <source
31            media={props.media.clone()}
32            srcset={&props.srcset}
33        />
34    )
35}
36
37/// Brand component
38///
39/// > A **brand** is used to place a product logotype on a screen.
40///
41/// See: <https://www.patternfly.org/components/brand>
42///
43/// Both basic and responsive modes are supported. If the list of sources is empty, then the basic
44/// mode is used. Otherwise it will use the response mode, with the default image as fallback.
45///
46/// The additional style will either be applied to the plain `img` element, or to the `picture`
47/// element in case of the responsive mode.
48///
49/// ## Properties
50///
51/// Defined by [`BrandProperties`].
52#[function_component(Brand)]
53pub fn brand(props: &BrandProperties) -> Html {
54    if props.children.is_empty() {
55        html! (
56            <img
57                class="pf-v5-c-brand"
58                style={&props.style}
59                src={&props.src}
60                alt={&props.alt}
61            />
62        )
63    } else {
64        html! (
65            <picture
66                class="pf-v5-c-brand pf-m-picture"
67                style={&props.style}
68            >
69                { for props.children.iter() }
70                <img
71                    class="pf-v5-c-brand"
72                    src={&props.src}
73                    alt={&props.alt}
74                />
75            </picture>
76        )
77    }
78}
patternfly_yew/components/brand.rs

patternfly_yew/components/
brand.rs
