Tocas Xiaoan
Tocas Xiaoan by 棒棒勝 & Henry Wu



圖案按鈕 只顯示洨安的按鈕。

原始碼
<button class="ts icon button">
  <i class="xiaoan icon"></i>
</button>


標籤圖示按鈕 帶有標籤和洨安的按鈕。



原始碼
<button class="ts labeled icon button">
  點我開啟始春
  <i class="xiaoan icon"></i>
</button>
<button class="ts right labeled icon button">
  點我開啟始春
  <i class="xiaoan icon"></i>
</button>


分隔線 可以讓你在分隔線插入很多洨安,要幾個都行。

哇伊!是三螢幕!

對不起,始春延期惹QQQQQ

原始碼
<div class="ts horizontal divider">
  <i class="xiaoan icon"></i>
  <i class="xiaoan instead icon"></i>
  <i class="xiaoan icon">
</div>


標題圖示標題可以帶有洨安圖示。

2016 始春
404 Not Found.

原始碼
<h3 class="ts center aligned icon header">
  <i class="xiaoan icon">
  2016 始春
  <div class="sub header">
    404 Not Found.
  </div>
</h3>


欄位圖示 你可以將洨安放入輸入欄位中。



原始碼
<div class="ts icon input">
  <input type="text" placeholder="尋找始春...">
  <i class="xiaoan icon"></i>
</div>
<div class="ts left icon input">
  <input type="text" placeholder="尋找始春...">
  <i class="xiaoan icon"></i>
</div>


板岩代表性符號 洨安會擺在板岩的右下角。

2016 始春或者更晚,而且晚很多。
原始碼
<div class="ts basic padded slate">
  <i class="xiaoan face symbol icon"></i>
  <span class="header">2016 始春</span>
  <span class="description">或者更晚,而且晚很多。</span>
</div>


標籤圖示 在標籤內放置一個洨安。

未讀郵件
2016
始春
原始碼
<div class="ts left icon label">
  <i class="xiaoan icon"></i>
   未讀郵件
  <div class="detail">2016</div>
</div>
<div class="ts right icon label">
  <i class="xiaoan icon"></i>
  始春
</div>


清單圖示 清單內也可以擺放洨安。

2016 始春
原始碼
<div class="ts list">
  <div class="item">
    <i class="xiaoan icon"></i>
    <div class="content">2016 始春</div>
  </div>
</div>


步驟圖示 步驟內可以擺放洨安。

官網上線
6,509 個訂閱者
2016 始春
開發中
Alpha 開放
20??
原始碼
<div class="ts fluid steps">
  <div class="step">
    <i class="xiaoan icon"></i>
    <div class="title">官網上線</div>
    <div class="description">6,509 個訂閱者</div>
  </div>
</div>
<div class="ts fluid steps">
  <div class="active step">
    <i class="xiaoan icon"></i>
    <div class="title">2016 始春</div>
    <div class="description">開發中</div>
  </div>
</div>
<div class="ts fluid steps">
  <div class="disabled step">
    <i class="xiaoan icon"></i>
    <div class="title">Alpha 開放</div>
    <div class="description">20??</div>
  </div>
</div>


分隔圖示 麵包屑的洨安分隔圖示。

原始碼
<div class="ts breadcrumb">
  <a class="section">Tocas UI</a>
  <i class="xiaoan icon divider"></i>
  <a class="section">.ts.xiaoan</a>
  <i class="xiaoan icon divider"></i>
  <div class="active section">Icon Font 範例</div>
</div>




Tocas Xiaoan