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

状态

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

• 🚧 核心API（进行中）

  • 字体排印
  • 图标
  • 🚧 按钮
    • 🚧 常用按钮
    • fab按钮
    • 扩展fab
    • 图标按钮
    • 分段按钮
  • 复选框
  • 芯片
  • 对话框
  • 分隔符
  • 提升
  • 列表
  • 单选按钮
  • 选择框
  • 选项卡
  • 文本框

• 🚧 适配器

  • 🚧 yew（与core-api并行进度）
  • seed
  • percy
  • scymore
  • dioxus

开发

先决条件

• 安装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

目标

• 提供材料设计规范在rust的API中用于在rustwasm环境中使用
• 提供零JS设计系统用于rust

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

路线图

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

使用说明

警告 本节已过时，使用和示例需要更新。

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

许可