Endorseds 是一個標籤樣式,可以使用類似 Autocomple 多選功能時,將結果以 Endorseds 來呈現。Endorseds 所有元件都將以 .endorsed-
為開頭。
先建立一個 Endorseds 的容器,建立一個 <div>
並且加上 .endorsed
,並且每一個 Endorsed 項目置入。
<div class="endorseds">
<span class="endorsed-item">
<span class="endorsed-item-name">Name</span>
</span>
<span class="endorsed-item">
<span class="endorsed-item-name">Name</span>
</span>
</div>
你也可以為它新增一個刪除按鈕
<div class="endorseds">
<span class="endorsed-item">
<span class="endorsed-item-name">Name</span>
<a class="endorsed-item-remove">×</a>
</span>
</div>
當按下移除按鈕時,或許你可以在 .endorsed-item
上增加一個 .out
<div class="endorseds">
<span class="endorsed-item">
<span class="endorsed-item-name">Name</span>
<a class="endorsed-item-remove">×</a>
</span>
<span class="endorsed-item out">
<span class="endorsed-item-name">Name</span>
<a class="endorsed-item-remove">×</a>
</span>
</div>
你也可以為它新增一個統計數據。
<div class="endorseds">
<span class="endorsed-item">
<span class="endorsed-item-counter">10</span>
<span class="endorsed-item-name">Name</span>
<a class="endorsed-item-remove">×</a>
</span>
</div>