Dot 狀態點

可插入句子、列表與表格的小圓點，會與文字對齊。

原始碼

<i sl-dot></i>

sl-tone-primarysecondarysuccesswarningdanger顏色

- 表示不寫這個屬性，用預設值；元件標記欄位的 - 是寫裸屬性

屬性

顏色 sl-tone

sl-dot 為 sl-tone 的適用元件。未標示時繼承文字顏色。選項見 Tone 色調。

大小與對齊

大小固定為 0.5em，隨所在文字的字級縮放，不須指定尺寸屬性。

原始碼

<span style="font-size: 14px">
  <i sl-dot></i> 14px
</span>
<span style="font-size: 16px">
  <i sl-dot></i> 16px
</span>
<span style="font-size: 20px">
  <i sl-dot></i> 20px
</span>
<span style="font-size: 28px">
  <i sl-dot></i> 28px
</span>

組合

置於名稱前方即為狀態列表。

原始碼

<ul style="list-style: none">
  <li>
    <i sl-dot sl-tone="success"></i> API
  </li>
  <li>
    <i sl-dot sl-tone="success"></i> CDN
  </li>
  <li>
    <i sl-dot sl-tone="warning"></i> 佇列
  </li>
  <li>
    <i sl-dot sl-tone="danger"></i> 資料庫
  </li>
</ul>

疊上 sl-card--corner 後固定於卡片角落（未標示為 end 右上，start 左上）。

兩個屬性標在同一個元素上即可，不需要外層容器：

<i sl-card--corner sl-dot sl-tone="danger"></i>

原始碼

<div sl-card style="width: 240px">
  <i sl-card--corner sl-dot sl-tone="danger"></i>
  <strong>系統狀態</strong>
  <p>有服務異常，需要處理。</p>
</div>