Material Dioxus

Material Dioxus 是一个组件库封装，围绕 Google 的 Material Web Components，用于 Dioxus 框架。仅支持 dioxus-web 渲染器。

示例

use material_dioxus::MatButton;
use dioxus::prelude::*;

rsx! {
    MatButton {
        label: "Click me!",
    }
};

入门

安装

Cargo.toml:

cargo add material-dioxus --features full

Material 图标和 Material 字体必须导入才能实现全部功能。
Dioxus.toml:

[web.resource]
style = [
    "https://fonts.googleapis.com/css?family=Roboto:300,400,500",
    "https://fonts.googleapis.com/css?family=Material+Icons&display=block",
    # ...
]

功能标志

每个组件都有一个 cargo 功能

• button
• circular-progress
• checkbox
• circular-progress-four-color

• icon-button
• fab
• formfield

• icon
• radio
• switch

• dialog
• list

• textfield
• textarea

all-components 功能启用所有组件。

此外，还有两个与主题相关的功能。

• theming — 提供一个 MatTheme 组件来设置颜色主题。
• palette — 提供材料颜色调色板常量（由 theming 自动启用）。

full 功能启用所有功能。

主题

这些组件遵循对 Material Web Components 应用了样式的主题。 了解如何为主题 Material Web Components。

为了方便起见，theming 功能提供了一个 MatTheme 组件，它接受几种颜色并设置所有所需的 CSS 变量。只需将其包含在应用程序的根目录中一次即可。

事件处理

由于普通 Dioxus 事件处理程序的生存期限制，material-dioxus 无法使用它们。暴露的事件则使用自定义回调类型。对于永远不会禁用的简单按钮，您也可以仅将其包装在一个 span 中，并使用该 span 上的普通事件处理程序。例如

use dioxus::prelude::*;
use material_dioxus::MatButton;

#[allow(non_snake_case)]
fn Counter(cx: Scope) -> Element {
    let mut counter = use_state(cx, || 0);

    render! {
        // option 1: wrap the component in a span and use normal event handling
        span {
            onclick: move |_| counter += 1,
            MatButton { label: "click me: {counter}" }
        }
        // option 2: use the event handlers exposed by the component to respect
        // thinks like a button being disabled.
        // The closure must be 'static so we make use of `to_owned!`.
        MatButton {
            label: "click me: {counter}",
            _onclick: {
                to_owned![counter];
                move |_| counter += 1
            },
        }
    }
}

文档

完整的API文档可以在这里找到这里。组件演示可以在这里找到这里。