4 个版本

新 0.0.7	2024 年 8 月 19 日
0.0.6	~~2024 年 8 月 19 日~~

#280 在开发工具

672 每月下载量

MIT 许可证

57KB
1K SLoC

Yew Google Material

yew-google-material = "0.0.7"

yew-google-material 是一个非常简单的 crate，用于使用一些 Google 材料，以及 https://fonts.google.com/

不幸的是，许多带有材料、图标用于 Yew 框架的 crate 已过时，并使用过时的 JavaScript 代码。

这里我仅使用 Rust 代码为 Yew 添加一些设计功能。

现在只提供按钮、文本字段和图标。

按钮和文本字段与 Google Material Web 中的不同，但非常相似。

图标

要使用来自 https://fonts.google.com/icons 的图标，您需要在其中添加一些 HTML

<head></head>

这里有三种类型的图标。如果您想使用图标的轮廓样式，请添加以下内容

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

如果您想使用图标的圆角样式

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

如果您想使用图标的锐利样式

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

然后从 https://fonts.google.com/icons 的目录中选择一个图标，例如 'search'、'star'、'menu' 等，并查看下面的示例。

示例

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

use yew::prelude::*;
use yew_google_material::prelude::*;

<GIcon 
    size="16px"
    transition="all 0.2s"
    icon="search" 
    icon_style={GIconStyle::Outlined} 
    fill=true
    wght="200"
    grade="0"
    opsz="24"
    color="#fff"
/>

请注意，您可以使用过渡动画图标属性。默认值是 "unset"，但对于动画，建议设置为 "all 0.2s" 或您想要的任何值。

或者您可以使用默认选项添加一个图标

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

use yew::prelude::*;
use yew_google_material::prelude::*;

<GIcon 
    icon="star" 
    icon_style={GIconStyle::Outlined} 
/>

按钮

输入字段的键大小属性是 font_size 属性。它绑定了许多其他文本字段的大小，默认值是 14px。

GTextInput 有许多属性（您可以通过它们创建类似 FAB 按钮的东西），但只需要 id。

注意！您必须设置 label 和/或使用图标以使按钮可读！

示例

use yew::prelude::*;
use yew_google_material::prelude::*;

GButton 
id="use_g_button" 
label="Button" />

您还可以使用 has_icon 属性添加图标。如果您需要尾随图标，请使用 GButton 中的 has_icon 和 trailing_icon 属性（使用 true），并在 GIcon 中使用 trailing_icon 属性。

use yew::prelude::*;
use yew_google_material::prelude::*;

<GButton 
id="login_button"
label="Sign In"
style={GButtonStyle::Outlined}
button_type="submit"
label_color="#6750A4"
has_icon=true
>
<GIcon 
    icon="login" 
    leading_icon=true
    icon_style={GIconStyle::Outlined} 
/>
</GButton>

注意！如果你在按钮内更改图标大小，可能会破坏设计。可能那时你需要调整宽度和高度。请谨慎操作。

文本字段

输入字段的键大小属性是 font_size。它与许多其他文本字段的大小相关联，默认值为 16px。

GTextInput 有许多属性，但只需 id、onchange 和 label 是必需的。这里的标签与占位符具有相同的作用。如果你不需要标签，请使用空的双引号添加它。

在此处查看此属性的描述：https://material-web.dev/components/text-field/#api

示例

use yew::prelude::*;
use yew_google_material::prelude::*;

let onchange_username = Callback::from(|username: AttrValue| {Msg::InputUsername(username)});

<GTextInput
id="username_text_login_name"
onchange={onchange_username} 
label="Имя пользователя" />

你还可以添加首尾 GIcons、更改样式、将事件更改为 InputEvent 以及通过这种方式使用属性进行许多其他操作

use yew::prelude::*;
use yew_google_material::prelude::*;

let search_input = Callback::from(|search_input: AttrValue| {Msg::Search(search_input)});

<GTextInput
    id="username_text_login_name"
    event={GInputEvent::OnInput}
    oninput={search_input} 
    has_leading_icon=true
    has_trailing_icon=true
    input_type="text" 
    supporting_text="text"
    label="Введите поисковый запрос" >
    <GIcon 
       icon="search" 
       leading_icon=true
       icon_style={GIconStyle::Outlined} 
    />
    <GIcon 
       icon="cancel" 
       trailing_icon=true
       icon_style={GIconStyle::Outlined} 
    />
</GTextInput>

版本

0.0.7

ReadMe 修复

0.0.5

GButton 添加
GTextInput 添加高度属性
许多 GTextInput 属性已被重命名
GTextInput 中 GIcon 大小调整已修复

0.0.4

GTextInput 添加

0.0.3

仅提供图标，ReadMe 已修复

依赖关系

~12–16MB
~289K SLoC