パーツ番号 11-05-02 ・ JavaScript使用
フィルタチップ行(選択中の条件)
現在選択中の絞り込み条件をチップで一覧表示し、×クリックで個別に解除できるUI。WordPressの商品一覧ページの条件確認に便利です。
プレビュー
ソースコード
HTML
<div class="d11-05-02-wrap">
<div class="d11-05-02-chips" id="d482Chips">
<span class="d11-05-02-chip">価格: ¥1,000-¥3,000<button type="button" aria-label="解除">×</button></span>
<span class="d11-05-02-chip">カテゴリ: 家具<button type="button" aria-label="解除">×</button></span>
<span class="d11-05-02-chip">在庫あり<button type="button" aria-label="解除">×</button></span>
</div>
<p class="d11-05-02-empty">絞り込み条件はありません</p>
</div>CSS
.prev.d11-05-02{align-items:flex-start;justify-content:flex-start}
.d11-05-02-wrap{width:100%}
.d11-05-02-chips{display:flex;flex-wrap:wrap;gap:8px}
.d11-05-02-chip{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;color:#4338ca;font-size:12px;font-weight:600;padding:6px 8px 6px 12px;border-radius:99px}
.d11-05-02-chip button{border:0;background:#c7d2fe;color:#3730a3;width:16px;height:16px;border-radius:50%;font-size:11px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s}
.d11-05-02-chip button:hover{background:#a5b4fc}
.d11-05-02-empty{display:none;font-size:12.5px;color:#9ca3af;margin:0}
.d11-05-02-empty.show{display:block}JavaScript
(function(){
var root=document.getElementById('item-11-05-02');
var chips=root.querySelector('.d11-05-02-chips');
var empty=root.querySelector('.d11-05-02-empty');
chips.addEventListener('click',function(e){
var btn=e.target.closest('button');
if(!btn)return;
var chip=btn.closest('.d11-05-02-chip');
if(chip)chip.remove();
if(!chips.querySelector('.d11-05-02-chip'))empty.classList.add('show');
});
})();クラス名 .d11-05-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。