zu 0.3.3

Yew web components, implementing Material Design
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

// Copyright (c) 2024 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
// Use of this source is governed by Lesser General Public License
// that can be found in the LICENSE file.

mod color;
mod variant;

use yew::{classes, function_component, html, Html, Properties};

use crate::styles::color::Color;
use crate::styles::CssClass;

// Re-export
pub use variant::Variant;

#[derive(Debug, Clone, PartialEq, Eq, Properties)]
pub struct Props {
    #[prop_or_default]
    pub color: Color,

    /// Override root style.
    #[prop_or_default]
    // TODO(Shaohua): Use custom style.
    pub style: String,

    /// The value of the progress indicator for the determinate variant.
    ///
    /// Value between 0 and 100.
    #[prop_or(0)]
    pub value: i32,

    /// The value for the buffer variant. Value between 0 and 100.
    ///
    /// Default is None.
    #[prop_or_default]
    pub value_buffer: Option<i32>,

    /// Use indeterminate when there is no progress value.
    #[prop_or_default]
    pub variant: Variant,

    /// Show label text or not.
    #[prop_or(false)]
    pub with_label: bool,
}

#[function_component(LinearProgress)]
pub fn linear_progress(props: &Props) -> Html {
    let root_cls = classes!(
        "ZuLinearProgress-root",
        color::root_class(props.color),
        props.variant.css_class(),
        if props.variant == Variant::Buffer {
            ""
        } else {
            "ZuLinearProgress-noBuffer"
        }
    );
    let _dashed_cls = classes!("ZuLinearProgress-dashed", color::dashed_class(props.color),);
    let _bar1_cls = classes!(
        "ZuLinearProgress-bar1",
        color::bar_class(props.color),
        match props.variant {
            Variant::Indeterminate | Variant::Query => "ZuLinearProgress-bar1Indeterminate",
            Variant::Determinate => "ZuLinearProgress-bar1Determinate",
            Variant::Buffer => "ZuLinearProgress-bar1Buffer",
        },
    );
    let _bar2_cls = classes!(
        "ZuLinearProgress-bar2",
        if props.variant == Variant::Buffer {
            color::root_class(props.color)
        } else {
            color::bar_class(props.color)
        },
        match props.variant {
            Variant::Indeterminate | Variant::Query => "ZuLinearProgress-bar2Indeterminate",
            Variant::Buffer => "ZuLinearProgress-bar2Buffer",
            Variant::Determinate => "",
        }
    );

    let root_style = "";

    html! {
        <span class={root_cls} style={root_style}>
        </span>
    }
}