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

状态

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

• 🚧 核心API（正在进行中）

  • 排版
  • 图标
  • 🚧 按钮
    • 🚧 常规按钮
    • fab 按钮
    • 扩展 fab
    • 图标按钮
    • 分段按钮
  • 复选框
  • 芯片
  • 对话框
  • 分隔线
  • 浮雕效果
  • 列表
  • 单选按钮
  • 选择
  • 标签页
  • 文本字段

• 🚧 适配器

  • 🚧 yew（与核心API并行开发）
  • 种子
  • 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

目标

• 提供 Rust 的 API 中的 Material 设计规范，用于在 rustwasm 基于的环境中使用
• 提供 Rust 的零 JavaScript 设计系统

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

路线图

• Material 设计的基本令牌映射
• ❌ 主题提供者
• 🚧 组件和核心 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支持我。

许可证