DOCS / COMPONENTS
组件文档
21 个文档页、29 个标签的独立使用说明。按职责分为基础组件与辅助组件： 每个组件一页，按场景拆分多组可交互示例，并附属性表、插槽 / 事件与示例代码。 header 与左侧组件目录由父页共享，切换组件时只替换右侧正文。
FOUNDATION
基础组件 17
构成页面骨架与完整业务流程：动作、表单、反馈、内容与导航。
Button
st-button
三种 M3 variant、语义色、loading 与图标插槽。按钮组、分裂按钮、图标按钮同属一个包。
查看用法Input
st-input
单行输入框：outlined / filled、前后缀、语义色校验态。value 是运行时状态。
查看用法Textarea
st-textarea
多行输入框，与 st-input 同范式；可用 autosize 跟随内容自动撑开。
查看用法Select
st-select
单选下拉框。选项写在 light DOM：原生 option 或 st-option 富内容；键盘全支持。
查看用法Checkbox
st-checkbox
复选框：选中 / 不确定 / 禁用 / 语义色。内部透明原生 checkbox 承载键盘。
查看用法Switch
st-switch
开关：轨道 / 拇指弹性动画，选中态可换语义色。
查看用法Radio
st-radio
单选按钮：同 name、同父容器内互斥；选中圆点弹性入场。
查看用法Slider
st-slider
滑块：内部原生 range 承载拖拽与键盘；聚焦 / 拖动时显示数值气泡。
查看用法Dialog
st-dialog
模态对话框：headline / 默认 / actions 三插槽，auto-close 支持遮罩与 Escape。
查看用法Menu
st-menu
下拉菜单：trigger 插槽 + light DOM 菜单项；自动翻转、点外部 / Escape 关闭，支持多级子菜单。
查看用法Snackbar
st-snackbar
消息条：默认次级色底、即时显示；duration 到时自动关闭（toast 工具另带滑入/滑出）。命令式版本是 toast。
查看用法Progress
st-progress
进度：线形 / 环形 × 确定 / 不定。缺省 value 自动视为不定。
查看用法Card
st-card
卡片容器：elevated / filled / outlined 三类型；interactive 时整卡可点并带波纹。
查看用法Badges
st-badges
徽标：小圆点 / 数字封顶 / 文字徽标，钉在默认插槽元素右上角，pointer-events: none。
查看用法List
st-list
列表与列表项：可点击 / 禁用 / 可折叠 + 子列表；首尾项自动大圆角。
查看用法Tabs
st-tab-bar
标签栏：指示条跟随 active 项平滑移动；active 切换由外部逻辑处理。
查看用法Navigation
st-nav-bar
导航栏 / 导航项 / 响应式布局：药丸背景跟随 active；nav-layout 按容器宽度自动切换底部导航与左侧 rail。
查看用法ENHANCEMENT
辅助组件 4
不单独承担业务流程，用来在基础组件之上做锦上添花：折叠、提示、波纹与命令式工具。
Collapse
st-collapse
高度过渡折叠容器：hide 收起，展开时高度跟随内容（ResizeObserver）。
查看用法Tooltip
st-tooltip
提示气泡：悬停 / 聚焦显示，fixed 定位自动上下翻转；content 按纯文本渲染。
查看用法Ripple
st-ripple
点击波纹。放在 position: relative 的父元素里即可；st-button 与 interactive 卡片已内嵌。
查看用法Command tools
toast · alert · confirm · prompt
命令式工具：Promise 化、用完即毁。基于 st-snackbar / st-dialog，可在任意 JS 中调用。
查看用法