leptos-material

leptos-material 是一个用于 Material Web Components (MWC) 的 Leptos 组件包装器，同时还提供了一些额外的组件以填补空缺。

此库旨在尽可能接近原始的 MWC 组件规范，这意味着您应该能够使用其 文档 中指定的所有内容。leptos-material 还实现了 MWC 中尚未实现的某些组件，例如卡片和日期选择器。

许多组件支持广泛的属性。为了简洁起见，leptos-material 不会完全公开所有属性，而是许多组件在 view 宏中使用 attr:attribute_name=value 语法来添加属性。例如

<TextField
style=TextFieldStyle::Outlined
attr:type=InputType::Email
attr:label="Email"
>

安装

要安装 leptos-material，请在您的项目目录中运行以下命令

cargo add leptos-material

或者，要使用项目中的最新仓库更新，请在您的 Cargo.toml 中添加

leptos-material = { git = "https://github.com/jordi-star/leptos-material" }

使用

在主组件的根目录中使用 UseMaterialWebComponents 组件来初始化 MWC。例如，如果您有一个名为 App 的主组件，则您的代码如下所示

#[component]
fn App() -> impl IntoView {
	view! {
		<UseMaterialWebComponents/>
		... // The rest of your site
	}
}

然后，启用您想要使用的任何组件的功能。例如，要使用 Icon 组件，您将启用 icon 功能。最后，您可以在代码中使用该组件。

#[component]
fn App() -> impl IntoView {
	view! {
		<UseMaterialWebComponents/>
		<h1>{"Hello from leptos-material!"}</h1>
		<Icon name="mood" />
	}
}

功能

每个组件都由一个功能控制。此库将任何需要的 MWC 组件捆绑到单个 JS 文件中，以供与 UseMaterialWebComponents 一起使用。默认情况下，leptos-material 使用 full 功能，这将包括所有 MWC 组件。为了减少编译时间和节省网页加载时间，请禁用默认功能，并仅添加与您需要的组件相关的功能。

nightly 注意

这个库不使用 nightly Rust，以便允许该库在使用稳定Rust工具链的项目中工作。使用Leptos与 nightly Rust允许使用信号的功能调用语法，而不是使用 .get() 和 .set()。此功能对该库不是必需的，因此leptos-material将在可预见的未来继续使用稳定的Rust。

正在进行中

这个库仍在开发中，目前尚未实现所有MWC组件。以下是当前已实现的特性标志列表

• 复选框
• 文本框
• 按钮
• 图标
• 图标按钮
• 卡片
• 提升
• 进度条
• 日期选择器
• 选择框
• 芯片