ナビゲーション / 一覧を絞り込む
Facets
種別と状態を組み合わせ、ページを離れずに大量の項目を絞り込みます。
基本的な使い方
- SELECT id FROM posts
- SELECT name FROM users
- INSERT INTO events (name) VALUES (:name)
該当する項目はありません。
HTML
<div class="facets" data-dd-facets="#facet-items" data-dd-facet-url="off" data-dd-empty="#facet-empty" data-dd-enhance hidden>
<div class="facet-group">
<button class="chip facet tone-blue" data-dd-facet="kind:select">SELECT <span class="facet-count">2</span></button>
<button class="chip facet tone-violet" data-dd-facet="kind:insert">INSERT <span class="facet-count">1</span></button>
</div>
<button class="btn" data-dd-facet-clear>解除</button>
<span class="facet-shown" aria-live="polite"></span>
</div>
<ul class="rows" id="facet-items">
<li class="row" data-dd-kind="select">SELECT id FROM posts</li>
<li class="row" data-dd-kind="select">SELECT name FROM users</li>
<li class="row" data-dd-kind="insert">INSERT INTO events (name) VALUES (:name)</li>
</ul>
<p class="empty" id="facet-empty" hidden>該当する項目はありません。</p>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
data-dd-facets | 絞り込む一覧のセレクタ。任意のスクリプトが必要です。 |
data-dd-facet="kind:select" | 条件と値。行のdata-dd-kind="select"に一致します。 |
data-dd-facet-search / data-dd-facet-clear | 文字検索の欄、または条件を解除するボタン。 |
data-dd-empty | 結果なしのメッセージを指定するセレクタ。 |
data-dd-facet-url="off" | URLへの条件保存を無効にします。埋め込みの作例などに使います。 |
使い方の注意
同じグループ内の値はOR、異なるグループはANDで組み合わせます。件数と選択状態を表示してください。JavaScriptなしでも全行を読めるようにします。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。