patternfly-yew 0.7.4

PatternFly 5 components for Yew
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

//! Login page controls
mod footer;

pub use footer::*;

use crate::prelude::Title;
use yew::{prelude::*, virtual_dom::VChild};

/// Properties for [`Login`]
#[derive(Clone, Debug, PartialEq, Properties)]
pub struct LoginProperties {
    #[prop_or_default]
    pub header: Option<Html>,
    #[prop_or_default]
    pub children: Html,
    #[prop_or_default]
    pub footer: Option<Html>,
}

/// Login page component
///
/// > A **login page** allows a user to gain access to an application by entering their username and password or by authenticating using a social media login.
///
/// See: <https://www.patternfly.org/components/login-page>
///
/// ## Properties
///
/// Defined by [`LoginProperties`]
///
/// ## Children
///
/// The login page component requires a more complex structure using [`LoginMain`] components. See
/// the Quickstart project for an example.
#[function_component(Login)]
pub fn login(props: &LoginProperties) -> Html {
    html! {
        <div class="pf-v6-c-login">
            <div class="pf-v6-c-login__container">
                if let Some(header) = &props.header {
                    <header class="pf-v6-c-login__header">{ header.clone() }</header>
                }
                { props.children.clone() }
                if let Some(footer) = &props.footer {
                    <footer class="pf-v6-c-login__footer">{ footer.clone() }</footer>
                }
            </div>
        </div>
    }
}

/// Properties for [`LoginMain`]
#[derive(Clone, Debug, PartialEq, Properties)]
pub struct LoginMainProperties {
    #[prop_or_default]
    pub children: Html,
    #[prop_or_default]
    pub class: Classes,
}

#[function_component(LoginMain)]
pub fn login_main(props: &LoginMainProperties) -> Html {
    let class = classes!("pf-v6-c-login__main", props.class.clone());
    html! { <main {class}>{ props.children.clone() }</main> }
}

/// Properties for [`LoginMainHeader`]
#[derive(Clone, Debug, PartialEq, Properties)]
pub struct LoginMainHeaderProperties {
    pub title: VChild<Title>,
    #[prop_or_default]
    pub description: String,
}

#[function_component(LoginMainHeader)]
pub fn login_main_header(props: &LoginMainHeaderProperties) -> Html {
    html! {
        <header class="pf-v6-c-login__main-header">
            { props.title.clone() }
            <p class="pf-v6-c-login__main-header-desc">{ &props.description }</p>
        </header>
    }
}

/// Properties for [`LoginMainBody`]
#[derive(Clone, Debug, PartialEq, Properties)]
pub struct LoginMainBodyProperties {
    #[prop_or_default]
    pub children: Html,
    #[prop_or_default]
    pub class: Classes,
}

#[function_component(LoginMainBody)]
pub fn login_main_body(props: &LoginMainBodyProperties) -> Html {
    let class = classes!("pf-v6-c-login__main-body", props.class.clone());
    html! { <div {class}>{ props.children.clone() }</div> }
}