网站导航
组件

按钮与输入控件

所有控件共用相同材质与状态顺序。

Buttons

Default, primary and quiet; hover lifts, pressing sinks

hover
pressed
focus
data-size="sm"
The static hover and pressed specimens use data-state; real buttons use native :hover, :active and :focus-visible.

Choices and fields

Selected segments rise inside a sunken track; fields float back to the sheet on focus

托盘标题栏中的互斥选项

托盘标题栏的分段控件会改变示例主体的实际工具类。

Cross-axis alignment

01
02
03
  • Subject
  • Taller comparison
  • Context
Selection changes the actual alignment utility on the flex parent. Scroll the preview horizontally when space is limited.

相关文档视图

方向键切换视图，Home 与 End 前往第一与最后项，Tab 进入所选面板。

Overview

A short explanation stays beside the example.

视口条件

预设值会在真实 iframe 中跨越 sm 断点，按钮内边距随该视口变化。

Responsive button padding

使用于 语法教程.

用法与接口

控件使用原生元素，各自只有一个根 class；变体与尺寸由数据属性表示，状态则来自原生伪类与 ARIA。

<button type="button" class="ui-button">Save</button><button type="button" class="ui-button" data-variant="primary">Publish</button><button type="button" class="ui-button" data-variant="quiet" data-size="sm">Replay</button><button type="button" class="ui-button" data-shape="icon" aria-label="Add">…</button><div class="ui-segmented" role="group" aria-label="View">  <button type="button" aria-pressed="true">Preview</button>  <button type="button" aria-pressed="false">Code</button></div><label class="ui-field">Name<input class="ui-input"><span class="ui-field-hint">…</span></label><select class="ui-select">…</select><input class="ui-range" type="range" style="--value: 40%"><label class="ui-check"><input type="checkbox">Show captions</label><label class="ui-check"><input type="checkbox" role="switch" class="ui-switch">Sync</label>

DemoControls 包裹具名分组：variant="segmented" 会渲染 ui-segmented，以带有 aria-pressed 的按钮提供互斥选项；普通默认形式则将混合控件排成一行。请通过 Demo controls 放在托盘标题栏，不要放入示例布局。

<Demo title="Cross-axis alignment" controls={  <DemoControls label="Cross-axis alignment" variant="segmented">    <button type="button" aria-pressed={alignment === 'items-flex-start'}>Start</button>    <button type="button" aria-pressed={alignment === 'items-center'}>Center</button>  </DemoControls>}>…</Demo>

#相关文档视图

每个选项用于显示相关面板时，请使用文档框架的 Segments。所有面板都会保留在 HTML 中；没有 JavaScript 或打印时，每个视图都会连同标签一起显示。

<Segments label="Document view example">{[  { name: 'Overview', content: <p>A short explanation stays beside the example.</p> },  { name: 'Details', content: <p>Supporting details remain available.</p> }]}</Segments>

ui-range 的填色跟随 --value；请将输入值换算为范围内的百分比后设置。