sendevia/website
1
0
Fork 0
mirror of https://github.com/sendevia/website.git synced 2026-03-05 23:32:45 +08:00
Code Activity

article: update

Browse Source
This commit is contained in:
sendevia
2025-11-11 21:25:51 +08:00
parent dbdae36a74
commit 4457b2539e
1 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
posts/markdown-examples.md
View File

@@ -91,6 +91,90 @@ This is a dangerous warning.
This is a details block.
:::
## Material Buttons
MaterialButton 组件是一个遵循 Material Design 3 规范的按钮组件，支持多种样式和功能。
### 属性列表
| 属性 | 类型 | 默认值 | 可选值 | 描述 |
|------|------|--------|--------|------|
| `text` | `string` | - | 任意字符串 | 按钮显示的文本内容 |
| `href` | `string` | - | 任意URL | 如果提供，按钮将渲染为链接 |
| `icon` | `string` | - | Material Icons 名称 | 按钮左侧的图标 |
| `size` | `string` | `"s"` | `"xs"`, `"s"`, `"m"`, `"l"`, `"xl"` | 按钮尺寸 |
| `shape` | `string` | `"round"` | `"round"`, `"square"` | 按钮形状 |
| `color` | `string` | `"filled"` | `"elevated"`, `"filled"`, `"tonal"`, `"outlined"`, `"standard"`, `"text"` | 按钮颜色样式 |
| `target` | `string` | `"_blank"` | `"_blank"`, `"_self"`, `"_parent"`, `"_top"` | 链接打开方式 |
### 尺寸规格
| 尺寸 | 高度 | 内边距 | 字体大小 | 图标大小 |
|------|------|--------|----------|----------|
| `xs` | 32px | 12px | label-large | 20px |
| `s` | 40px | 16px | label-large | 20px |
| `m` | 56px | 24px | title-medium | 24px |
| `l` | 96px | 48px | headline-small | 32px |
| `xl` | 136px | 64px | headline-large | 40px |
### 使用示例
**Input**
```md
<!-- 基础按钮 -->
<MaterialButton text="默认按钮" />
<!-- 带图标按钮 -->
<MaterialButton text="带图标按钮" icon="favorite" />
<!-- 链接按钮 -->
<MaterialButton text="链接按钮" href="https://example.com" />
<!-- 不同尺寸 -->
<MaterialButton text="大号按钮" size="l" />
<MaterialButton text="小号按钮" size="xs" />
<!-- 不同形状 -->
<MaterialButton text="方形按钮" shape="square" />
<!-- 不同颜色样式 -->
<MaterialButton text="轮廓按钮" color="outlined" />
<MaterialButton text="强调按钮" color="tonal" />
<MaterialButton text="提升按钮" color="elevated" />
<MaterialButton text="文本按钮" color="text" />
<!-- 组合使用 -->
<MaterialButton text="带图标链接" href="/" icon="home" target="_self" />
```
**Output**
<!-- 基础按钮 -->
<MaterialButton text="默认按钮" />
<!-- 带图标按钮 -->
<MaterialButton text="带图标按钮" icon="favorite" />
<!-- 链接按钮 -->
<MaterialButton text="链接按钮" href="https://example.com" />
<!-- 不同尺寸 -->
<MaterialButton text="大号按钮" size="l" />
<MaterialButton text="小号按钮" size="xs" />
<!-- 不同形状 -->
<MaterialButton text="方形按钮" shape="square" />
<!-- 不同颜色样式 -->
<MaterialButton text="轮廓按钮" color="outlined" />
<MaterialButton text="强调按钮" color="tonal" />
<MaterialButton text="提升按钮" color="elevated" />
<MaterialButton text="文本按钮" color="text" />
<!-- 组合使用 -->
<MaterialButton text="带图标链接" href="/" icon="home" target="_self" />
## More
Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).