Endorseds

Endorseds 是一個標籤樣式,可以使用類似 Autocomple 多選功能時,將結果以 Endorseds 來呈現。Endorseds 所有元件都將以 .endorsed- 為開頭。

預設樣式

先建立一個 Endorseds 的容器,建立一個 <div> 並且加上 .endorsed,並且每一個 Endorsed 項目置入。

Name Name
<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>

Remove

你也可以為它新增一個刪除按鈕

Name × Name ×
<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

Name × Name ×
<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>

Counter

你也可以為它新增一個統計數據。

10 Name ×
<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>