💇‍♂️+🦀 -> Hallings - Yew 组件

❓ 目的

如果有几个预构建的组件，如密码强度检查器或步骤剩余，那会怎么样？不再需要猜测。

⚠ 这是一个未完成的库，它作为瑞典林德大学（LiU）研究生课程期间的原型/测试，不应用于任何实际项目

先决条件

✔ Yew: 版本 "0.20"

🏁 入门

1. 安装 Yew
2. 将依赖项添加到 Cargo.toml 文件中 hallings = "0.1"
3. 通过执行 use hallings::prelude::* 引入库

👷‍♂️ 开始就这么简单

✒ 运行测试

所有测试都位于 test.rs 中。要运行测试，请确保已安装所有必需的组件，然后运行。

• wasm-pack test--chrome

可以将 --chrome 替换为 --firefox。有关更多信息，请参阅 wasm-pack 文档

👌 以下是我们的使用示例...

提供者 & 主题

霍尔林斯使用 上下文提供者 向组件提供主题数据。目前无法传递自己的主题结构。

<MaestroProvider> halling components </MaestroProvider>

所有示例都已使用 yew = "0.20" 在 函数组件 中进行测试。

文本

<Text
    size={"40px"}
    color={"purple"} // if none is specified theme color is used
    class={classes!("Custom class")}
>
    {"Pretty large text"}
</Text>

或通过属性变量馈送文本，

<Text size={"40px"} custom={TextProps { label: "Test".into() }}/>

按钮

let counter = use_state(|| 0);

let click = {
    let counter = counter.clone();
    Callback::from(move |_s: yew::MouseEvent| {
        counter.set(*counter + 1);
    })
};

<Button custom={
    ButtonProps { onclick: cb }
}>
    <Text color={"white"}>{"Next"}</Text>
</Button>

密码强度检查器

该组件提供密码输入组件，同时根据当前密码的强度提供反馈。您可以为自己的强度检查函数和格式化函数提供支持。目前没有直接提取密码值的方法。

<PasswordStrengthInput
	custom = { PasswordStrengthInputProps
	{
        calculate_strength_level: None,
        strength_level_to_text_and_color: None,
        strength_callback: None
	}}
/>

示例 1（默认行为）

pub fn calculate_strength_level(value: String) -> StrengthLevel {
    if value.contains("secure") {
        return StrengthLevel::HIGH;
    }
    StrengthLevel::LOW
}

pub fn on_level_change(strength_level: StrengthLevel) {
    // use strength_level
}

fn strength_level_to_text_and_color(value: StrengthLevel) -> (String, String) {
    match value {
        StrengthLevel::LOW => ("Password not strong enough".into(), "red".into()),
        StrengthLevel::MEDIUM => ("Password weak but passable".into(), "blue".into()),
        StrengthLevel::HIGH => ("Password strong".into(), "green".into()),
    }
}

<PasswordStrengthInput
    custom = { PasswordStrengthInputProps {
        calculate_strength_level: Some(calculate_strength_level),
        strength_level_to_text_and_color: Some(strength_level_to_text_and_color),
        strength_callback: Some(on_level_change)
    }}
/>

示例 2（自定义行为）

步骤剩余

步骤剩余部分使用svg, 圆形和线条来绘制其UI。宽度和高度决定了svg图像的宽度和高度。您可以提供任意数量的步骤，组件会动态定位和间距这些步骤。

<StepsLeft
    custom = {
        StepsLeftProps {
            width: 800,
            height: 200,
            current_step: (*counter).clone(),
            steps: vec![
                Step {
                    label: "Check out".into()
                },
                Step {
                    label: "Confirm".into()
                },
                Step {
                    label: "Pay".into()
                },
            ]
        }
    }
/>