这是一个基于 Material 3 规范的 Rust 设计系统

状态

正在开发中（尚未准备好使用），请参阅项目网站 https://material-rs.gitlab.io/material_you_rs

开发

先决条件

• 安装 rust 安装 rust

• 添加 wasm32 目标

rustup target add wasm32-unknown-unknown

• 安装 wasm 工具，wasm-pack 和 wasm-bingend-cli，以及 cargo-watch（用于实时重新加载）

cargo install wasm-pack wasm-bindgen-cli cargo-watch

• 一些 http 服务器，例如 python http.server

运行

• 克隆仓库

git clone https://gitlab.com/material-rs/material_you_rs

• 构建和提供网站

cd /path/of/material_you_rs
wasm-pack build website --target no-modules
cd website
python3 -m http.server

现在您可以在浏览器中看到示例网站

开发时监控文件更改

• 用于开发和实时重新加载

cd /path/of/material_you_rs
cargo watch -w . -i .git -i .gitignore -i Cargo.lock -i target -i website/pkg "wasm-pack build website --target no-modules"

• 并在另一个终端提供网站

cd /path/of/material_you_rs/website
python3 -m http.server

目标

• 为基于 rustwasm 的环境提供 Material 设计规范 Rust API
• 为 Rust 提供 0 js 设计系统

目前我们正在开发 yew 的 API，但将来我们希望可以为所有 rustwasm 框架提供 API

路线图

• 实现 Material 设计的基本令牌映射
• 实现主题提供者
• 实现组件
• 实现主题生成器

用法

警告 此部分已过时，用法和示例需要更新。

• 将依赖项添加到您的 Cargo.toml

cargo add material_you

• 导入库并添加主题提供者

use yew::prelude::{function_component, html};
use material_you::provider::MaterialProvider;

#[function_component(MyApp)]
fn my_app() -> Html {
	// MaterialProvider provides context info for material design
	// for theming, icons, typography
	html! { <MaterialProvider>
		<p>{"My App"}</p>
	</MaterialProvider> }
}

• 现在您可以使用组件

use yew::prelude::{function_component, html};
use material_you::{
	color::ColorRole, 
	components::card::{
		Card, 
		CardKind, 
		FilledCard, 
	},
	css,
	provider::MaterialProvider
};

#[function_component(MyComponent)]
fn my_component() -> Html {
	let styles = {
		let custom_styles = css::new_style("div", r#"margin: 8px;"#);

		vec![custom_styles]
	};

	let custom_bg_role = ColorRole::Tertiary;

	html! { <div>
		<Card bg_role={custom_bg_role} styles={styles.clone()} >{"ElevatedCard is the default card"}</Card>

		<Card kind={CardKind::Outlined} styles={styles.clone()} >{"Outlined Card"}</Card>

		<FilledCard styles={styles.clone()} >{"Filled card"}</FilledCard>
	</div> }
}

#[function_component(MyApp)]
fn my_app() -> Html {
	html! { <MaterialProvider>
		<MyComponent />
	</MaterialProvider> }
}

贡献指南

正在开发中...（我们尚未定义开发周期）

支持

我是一个独立的计算机开发者和研究员。由于我生活在边缘，我的工作进展缓慢。我已经寻找了几年的工作，以便能够生活并继续我的工作，但这比说起来容易。

如果您相信我的代码并希望支持我的工作，您可以给我一份工作或通过 patreon 支持我。

许可证