组件

总览

浏览 @xingxingmofashu/ui 的全部组件。

@xingxingmofashu/ui 提供二十五个可访问组件,覆盖基础元素、表单控件、浮层与反馈。每个组件页都包含真实示例、API 属性与用法说明。除 className 外,每个组件都提供按 data-slot 组织的 ui 槽位。

在线示例

每个组件页都包含真实示例,营销首页则预览其中一部分组件。打开下方任意页面,即可在明暗两套主题下试用真实组件。

基础元素

  • Accordion — 共享一块玻璃表面的折叠面板。
  • Button — 圆角玻璃按钮,支持图标与五种尺寸。
  • Card — 由 header、body 与 footer 组成的玻璃卡片。
  • Scroll Area — 带自定义滚动条的玻璃滚动区域。
  • Tabs — 带滑动指示器的玻璃标签栏。
  • Toggle — 带按下滑块的两种状态玻璃按钮。
  • Toggle Group — 支持单选与多选的 Liquid Glass 选中态。

表单

  • Form — 统一错误处理与表单级校验的原生 form。
  • Checkbox — 带勾选动画与不确定状态的玻璃方块。
  • Checkbox Group — 共享选中状态的复选框分组,支持标签与说明。
  • Field — 为单个表单控件提供标签、说明与校验信息的容器。
  • Fieldset — 为相关字段提供 Liquid Glass 图例的 fieldset。
  • Input — 带图标插槽、通过 Field 添加标签的玻璃输入框。
  • Radio Group — 圆形玻璃单选控件,支持标签、描述与键盘导航。
  • Select — 支持标签、描述、禁用选项与五种尺寸的玻璃选择器。
  • Slider — 支持单值、区间与纵向布局的滑块。
  • Switch — 滑动时会拉伸的 Liquid Glass 开关。

浮层

  • Alert Dialog — 带内置取消与确认操作的模态确认框。
  • Dialog — 带自定义操作区的通用模态框。
  • Drawer — 贴边滑入、支持滑动关闭的玻璃抽屉。
  • Menu — 支持分组、分隔线、图标与快捷键的玻璃操作菜单。
  • Popover — 锚定在触发器上的非模态玻璃面板。
  • Toast — 带状态图标与操作的堆叠玻璃通知。
  • Tooltip — 悬停或聚焦时显示的紧凑玻璃提示。

反馈

  • Progress — 支持确定与不确定状态的线性玻璃进度条。