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>