ナビゲーション
コンポーネント

ボタンと入力

すべてのコントロールで素材と状態の順序をそろえます。

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 境界をまたぎ、ボタンの padding はそのビューポートに従います。

Responsive button padding

使用箇所： 構文チュートリアル.

使い方とインターフェース

コントロールはそれぞれ1つのルート 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" は aria-pressed を持つボタンで排他的な選択を行う ui-segmented を描画し、標準では種類の異なるコントロールを1行に並べます。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 に従います。入力値を範囲に対する割合に換算して指定します。