patternfly_yew/components/
visible.rs

1use crate::prelude::attr_value_to_static_cow;
2use implicit_clone::unsync::IString;
3use yew::prelude::*;
4
5/// Properties for [`Visible`].
6#[derive(PartialEq, Properties)]
7pub struct VisibleProperties {
8    /// The visibility flag
9    pub visible: bool,
10
11    /// The content to show/hide
12    #[prop_or_default]
13    pub children: Html,
14
15    /// Additional classes
16    #[prop_or_default]
17    pub class: Classes,
18    #[prop_or_default]
19    pub style: Option<AttrValue>,
20    #[prop_or_default]
21    pub id: Option<AttrValue>,
22
23    /// The element to wrap the content with. Defaults to `div`.
24    #[prop_or("div".into())]
25    pub element: IString,
26}
27
28/// A component hiding its content when not being visible.
29///
30/// While the content is still part of the DOM tree, the wrapping element (and its children)
31/// will not be visible.
32///
33/// ## Properties
34///
35/// Defined by [`VisibleProperties`].
36///
37/// ## Example
38///
39/// ```rust
40/// use yew::prelude::*;
41/// use patternfly_yew::prelude::*;
42///
43/// #[function_component(Example)]
44/// fn example() -> Html {
45///   let visible = true;
46///   html!(
47///     <>
48///       <Visible {visible}>
49///         { "Show me" }
50///       </Visible>
51///       <Visible {visible} element="span">
52///         { "Show me (inline)" }
53///       </Visible>
54///     </>
55///   )
56/// }
57/// ```
58#[function_component(Visible)]
59pub fn visible(props: &VisibleProperties) -> Html {
60    let mut class = match props.visible {
61        true => classes!(),
62        false => classes!("pf-v5-u-display-none"),
63    };
64
65    class.extend(&props.class);
66
67    html!(
68        <@{attr_value_to_static_cow(&props.element)}
69            {class}
70            style={props.style.clone()}
71            id={props.id.clone()}
72        >
73            { props.children.clone() }
74        </@>
75    )
76}
77
78#[cfg(test)]
79mod test {
80    use super::*;
81
82    #[test]
83    fn test_ele() {
84        let element: String = "div".into();
85        let _ = html!(<Visible visible={true} {element} / >);
86        let _ = html!(<Visible visible={true} element={"div"} / >);
87    }
88}
patternfly_yew/components/visible.rs

patternfly_yew/components/
visible.rs
