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

状态

正在进行中，(尚未准备好使用)请参阅项目网站 https://material-rs.gitlab.io/material_you_rs

• 🚧 核心API（进行中）

  • 排版
  • 图标
  • 🚧 按钮
    • 🚧 常用按钮
    • fab按钮
    • 扩展fab
    • 图标按钮
    • 分段按钮
  • 复选框
  • 芯片
  • 对话框
  • 分隔符
  • 阴影
  • 列表
  • 单选按钮
  • 选择框
  • 标签页
  • 文本字段

• 🚧 适配器

  • 🚧 yew（与核心API并行进行中）
  • seed
  • percy
  • scymore
  • dioxus

开发

先决条件

• 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 -c -q -w . -i .git -i .gitlab -i target -i website/pkg -i website/.gitignore -i website/index.html -i .gitignore -i Cargo.lock -i README.md -i rustfmt.toml -s 'wasm-pack build website --target no-modules'

• 并在另一个终端中提供服务

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

目标

• 为基于rustwasm的环境提供Rust API中的material设计规范
• 为Rust提供零JS设计系统

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

路线图

• 材料设计的基本令牌映射
• ❌ 主题提供者
• 🚧 组件和核心API（仅基本组件）
• 🚧 适配器
• 实现主题生成器
• 设计服务器
• 核心API的复杂和高级组件
• 更新适配器

用法

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

• 将依赖项添加到您的 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支持我。

许可证