Button styles
Primary / Secondary / Destructive / Disabled
Simped Design Gallery / 01—09
Controls.
很大程度上继承了Metro Design，且为Web设计的简约UI
Buttons
基础交互
Sizes & states
Small / Default / Large
Toggle button
按下状态会保持，适用于工具栏命令
尚未选择工具。
Icon & split actions
轻量图标按钮和主次命令组合
Text inputs
文本、搜索、数字、日期与多行输入
Text field
默认、聚焦、禁用与错误状态
使用简短、明确的字段标签。
请输入有效的邮箱地址。
Search box
输入后按 Enter 或点击搜索
试试输入 “button” 或 “toggle”。
Numeric & password
原生输入语义，保留浏览器辅助能力
date/time
日期与时间控件
Selection
复选框、单选框、开关与列表选择
Check boxes
独立选项，支持多选
Radio buttons
互斥选择，同组只能选一个
当前选择：浅色主题
Toggle switches
适合即时生效的开 / 关设置
Wi-Fi 已开启。
Choice chips & tags
紧凑的筛选项与可移除标签
Range & progress
连续值、评级、进度与加载反馈
Slider
拖动滑块，数值即时更新
0100
Progress bar
确定进度与不确定进度
下载中
后台任务
正在同步…
Rating
点击星星选择 1–5 星
未评分
Stepper
数值增减与数量调整
件
Lists & data
列表项、徽标、状态标签与数据表格
List view
可选择列表行
- 邮件3 封未读消息3
- 音乐最近播放›
- 设置系统偏好›
点击列表项进行选择。
Badges & status
低调、紧凑的状态表达
新消息 3在线 ●同步中 已保存 ✓
提示：这是普通信息提示。
注意：此操作可能需要确认。
错误：无法完成当前操作。
Data table
简洁表格、行悬停与状态列
| 名称 | 类型 | 状态 | 大小 |
|---|---|---|---|
| Settings | 系统 | ● 已启用 | 2.4 MB |
| Photos | 媒体 | ● 已同步 | 18.2 MB |
| Updates | 服务 | ● 等待中 | — |
Feedback
消息、工具提示与状态反馈
Tooltips
悬停或键盘聚焦图标查看提示
Toast notifications
短暂反馈，不打断当前流程
Inline validation
提交表单后显示校验结果
Keyboard & accessibility
键盘操作和可读状态
使用 Tab 移动焦点，Enter / Space 激活按钮。所有主要控件保留原生语义与可见焦点样式。
Overlays
对话框、菜单与浮层
ContentDialog
居中显示，淡入淡出
Bottom ContentDialog
底部弹出
Context menu
命令列表与分隔线
ComboBox
根据最长选项自动调整宽度；点击后在控件原位切换选择视图
ComboBox在此处展示可能存在Bug，且尚不成熟，更推荐使用左侧的Context menu
Other controls
颜色、文件选择、日期与开发者信息
Accent color
切换强调色
File upload
文件选择
尚未选择文件。
Design tokens
通过 CSS variables 统一调整控件主题
| Token | 用途 | 当前值 |
|---|---|---|
| --accent | 主要强调色 / Focus | #0078d7 |
| --bg | 页面背景 | 由主题控制 |
| --panel | 控件容器背景 | 由主题控制 |
| --line | 边框与分隔线 | 由主题控制 |
| --font | 系统字体栈 | Segoe UI / Microsoft YaHei |