patternfly_yew/components/
background.rs

1//! Background image
2use std::borrow::Cow;
3use yew::html::IntoPropValue;
4use yew::prelude::*;
5
6/// Properties for [`Background`]
7#[derive(Clone, PartialEq, Properties)]
8pub struct BackgroundProperties {
9    /// The main element's ID.
10    #[prop_or_default]
11    pub id: Option<String>,
12
13    /// The styling of the background.
14    ///
15    /// By default, this will be the patternfly logo loaded from the static PatternFly assets.
16    /// However, this can be overridden by either using a simple URL for an image, or a full set
17    /// of CSS styling.
18    #[prop_or_default]
19    pub style: BackgroundStyle,
20
21    /// Additional CSS styling which will be appended to the base style.
22    ///
23    /// **NOTE:** Using this in combination with [`BackgroundStyle::Style`] will simple append
24    /// two strings as style information.
25    #[prop_or_default]
26    pub additional_style: Option<String>,
27}
28
29#[derive(Clone, Default, Debug, PartialEq, Eq)]
30pub enum BackgroundStyle {
31    #[default]
32    Default,
33    Image(Cow<'static, str>),
34    Style(Cow<'static, str>),
35}
36
37impl IntoPropValue<BackgroundStyle> for String {
38    fn into_prop_value(self) -> BackgroundStyle {
39        BackgroundStyle::Image(self.into())
40    }
41}
42
43impl IntoPropValue<BackgroundStyle> for &'static str {
44    fn into_prop_value(self) -> BackgroundStyle {
45        BackgroundStyle::Image(self.into())
46    }
47}
48
49impl IntoPropValue<BackgroundStyle> for Cow<'static, str> {
50    fn into_prop_value(self) -> BackgroundStyle {
51        BackgroundStyle::Image(self)
52    }
53}
54
55/// Background image component
56///
57/// > A **background image** allows you to place an image in the background of your page or area of a page.
58///
59/// See: <https://www.patternfly.org/components/background-image>
60///
61/// ## Properties
62///
63/// Defined by [`BackgroundProperties`].
64///
65/// ## Example
66///
67/// ```rust
68/// use patternfly_yew::prelude::*;
69/// use yew::prelude::*;
70///
71/// #[function_component(Example)]
72/// fn example() -> Html {
73///   html!(
74///     <>
75///       <Background style="assets/images/pfbg-icon.svg"/>
76///       <p>{"Content on the background"}</p>
77///     </>
78///   )
79/// }
80/// ```
81#[function_component(Background)]
82pub fn background(props: &BackgroundProperties) -> Html {
83    let mut style = match &props.style {
84        BackgroundStyle::Default => {
85            "--pf-v5-c-background-image--BackgroundImage: url(assets/images/pfbg-icon.svg);"
86                .to_string()
87        }
88        BackgroundStyle::Image(url) => {
89            format!("--pf-v5-c-background-image--BackgroundImage: url({url});")
90        }
91        BackgroundStyle::Style(style) => style.to_string(),
92    };
93
94    if let Some(additional) = &props.additional_style {
95        style.push_str(additional);
96    }
97
98    html!(
99        <div
100            id={props.id.clone()}
101            class="pf-v5-c-background-image"
102            {style}
103        ></div>
104    )
105}
patternfly_yew/components/background.rs

patternfly_yew/components/
background.rs
