ナビゲーション / ボタンと入力欄
Control
文書に必要な少数の操作を、控えめで一貫した見た目に揃えます。
基本的な使い方
HTML
<div class="actions">
<a class="btn btn-primary btn-lg" href="../../start/">導入ガイド →</a>
<a class="btn btn-lg" href="../">一覧に戻る</a>
<button class="btn btn-quiet" data-dd-theme-toggle data-dd-enhance hidden>◐</button>
</div>
<label>名前で絞り込む <input class="input" type="search" data-dd-filter="#control-items" placeholder="例：Chip"></label>
<ul class="rows" id="control-items"><li class="row">Chip</li><li class="row">Table</li></ul>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.btn / .btn-quiet | 標準または控えめなボタン。移動にはリンクを使います。 |
.btn-primary / .btn-lg | 主な操作、または余白を広く取った操作部品。 |
.input / .input-block | 標準の入力欄、または全幅の入力欄。 |
data-dd-theme-toggle | 自動・ライト・ダークの順にテーマを切り替えます。 |
data-dd-enhance hidden | 任意のスクリプトが初期化されたあとだけ操作部品を表示します。 |
使い方の注意
入力欄にラベル、アイコンだけのボタンにアクセシブルな名前を付けます。キーボードフォーカスの輪郭は残してください。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。