patternfly_yew/components/skeleton/
mod.rs

1use crate::prelude::{AsClasses, ExtendClasses};
2use yew::prelude::*;
3
4#[derive(Clone, Copy, Eq, PartialEq)]
5pub enum SkeletonFontSize {
6    Sm,
7    Md,
8    Lg,
9    Xl,
10    Xxl,
11    Xxxl,
12    Xxxxl,
13}
14
15impl AsClasses for SkeletonFontSize {
16    fn extend_classes(&self, classes: &mut Classes) {
17        match self {
18            Self::Sm => classes.push(classes!("pf-m-text-sm")),
19            Self::Md => classes.push(classes!("pf-m-text-sm")),
20            Self::Lg => classes.push(classes!("pf-m-text-lg")),
21            Self::Xl => classes.push(classes!("pf-m-text-xl")),
22            Self::Xxl => classes.push(classes!("pf-m-text-2xl")),
23            Self::Xxxl => classes.push(classes!("pf-m-text-3xl")),
24            Self::Xxxxl => classes.push(classes!("pf-m-text-4xl")),
25        }
26    }
27}
28
29#[derive(Clone, Copy, Eq, PartialEq)]
30pub enum SkeletonShape {
31    Circle,
32    Square,
33}
34
35impl AsClasses for SkeletonShape {
36    fn extend_classes(&self, classes: &mut Classes) {
37        match self {
38            Self::Circle => classes.push(classes!("pf-m-circle")),
39            Self::Square => classes.push(classes!("pf-m-square")),
40        }
41    }
42}
43
44/// Properties for [`Skeleton`]
45#[derive(Clone, PartialEq, Properties)]
46pub struct SkeletonProperties {
47    #[prop_or_default]
48    pub width: Option<String>,
49
50    #[prop_or_default]
51    pub height: Option<String>,
52
53    #[prop_or_default]
54    pub font_size: Option<SkeletonFontSize>,
55
56    #[prop_or_default]
57    pub shape: Option<SkeletonShape>,
58
59    #[prop_or_default]
60    pub screenreader_text: String,
61
62    /// additional styles
63    #[prop_or_default]
64    pub style: AttrValue,
65}
66
67/// The Skeleton component.
68///
69/// > A **skeleton** is a type of loading state that allows you to expose content incrementally. For content that may take a long time to load, use a progress bar in place of a skeleton.
70///
71/// See: <https://www.patternfly.org/components/skeleton>
72///
73/// ## Example
74///
75/// ```rust
76/// use patternfly_yew::prelude::*;
77/// use yew::prelude::*;
78///
79/// #[function_component(Example)]
80/// pub fn example() -> Html {
81///   html!(
82///     <Skeleton />
83///   )
84/// }
85/// ```
86#[function_component(Skeleton)]
87pub fn skeleton(props: &SkeletonProperties) -> Html {
88    let mut skeleton_classes = classes!("pf-v5-c-skeleton");
89    if let Some(val) = props.font_size {
90        skeleton_classes.extend_from(&val)
91    }
92    if let Some(val) = props.shape {
93        skeleton_classes.extend_from(&val)
94    }
95
96    let mut skeleton_styles = vec![props.style.to_string()];
97    if let Some(val) = &props.width {
98        let style = format!("--pf-v5-c-skeleton--Width: {};", val);
99        skeleton_styles.push(style.to_string());
100    }
101    if let Some(val) = &props.height {
102        let style = format!("--pf-v5-c-skeleton--Height: {};", val);
103        skeleton_styles.push(style.to_string());
104    }
105
106    html!(
107        <div
108            class={skeleton_classes}
109            style={skeleton_styles.join(" ")}
110        >
111            <span class={"pf-v5-u-screen-reader"}>{&props.screenreader_text}</span>
112        </div>
113    )
114}
patternfly_yew/components/skeleton/mod.rs

patternfly_yew/components/skeleton/
mod.rs
