Tocas: 分頁籤容器選單在板岩裡置中失效

[goodjack]

HTML 結構是從 GitHub 範例 | Tocas UI 抽出來的
我發現在遊樂場裡加上 2.3.2 版的 CSS 後就正常

遊樂場：https://goo.gl/zGiPgB

<!-- 倉庫標題板岩 -->
<div class="ts slate">
    <!-- 分頁籤容器選單 -->
    <div class="ts bottom attached pointing tabbed narrow container menu">
        <div class="active item">
            <i class="code icon"></i>
            程式碼
        </div>
        <div class="item">
            <i class="notice circle icon"></i>
            錯誤回報
        </div>
        <div class="item">
            <i class="columns icon"></i>
            專案
        </div>
        <div class="item">
            <i class="heartbeat icon"></i>
            動向
        </div>
        <div class="item">
            <i class="area chart icon"></i>
            統計
        </div>
    </div>
    <!-- / 分頁籤容器選單 -->
</div>
<!-- / 倉庫標題板岩 -->

[YamiOdymel]

抱歉，當時的 Container 用法很奇異。

事實上 .ts.container.menu 是一個不正確的用法。新的用法已經改為 .ts.menu > .ts.container。

（因為現在的遊樂場不能擺連結，會爬代所以無法補上遊樂場的 Demo）

<!-- 倉庫標題板岩 -->
<div class="ts slate">
    <!-- 分頁籤選單 -->
    <div class="ts bottom attached pointing tabbed menu">
        <!-- 選單內容容器 -->
        <div class="ts narrow container">
            <a href="#!" class="active item">
                <i class="code icon"></i>
                程式碼
            </a>
            <a href="#!" class="item">
                <i class="notice circle icon"></i>
                錯誤回報
            </a>
            <a href="#!" class="item">
                <i class="columns icon"></i>
                專案
            </a>
            <a href="#!" class="item">
                <i class="heartbeat icon"></i>
                動向
            </a>
            <a href="#!" class="item">
                <i class="area chart icon"></i>
                統計
            </a>
        </div>
        <!-- / 選單內容容器 -->
    </div>
    <!-- / 分頁籤選單 -->
</div>
<!-- / 倉庫標題板岩 -->

[goodjack]

那如果想要像 GitHub Organization 這樣
把一些元素置中在板岩中
HTML 的結構應該要長怎樣呢

之前留言裡問過 好像不應該放 Grid 在裡面
原本範例中的 narrow container 還是正確的用法嗎？

[YamiOdymel]

2.3.3 的 Slate 還不能這麼做（_因為一堆奇異要求都是在 2.3.3 之後出來的_），可能需要透過 Segment 然後更改一堆樣式來達成。

在 3.0-alpha 可以像下面這樣辦到，不過正式的 3.0 能不能保有這個樣式還不確定就是了。

明天先釋出 3.0-alpha 版本供開發者使用好了⋯⋯（_但是多數 JavaScript 模塊都還不能使用_）。

<!-- 倉庫標題板岩 -->
<div class="ts slate">
    <!-- 上部網格容器 -->
    <div class="ts narrow container relaxed grid">
        <!-- 左側圖片欄位 -->
        <div class="column">
            <img class="ts tiny image" src="va.png" alt="">
        </div>
        <!-- / 左側圖片欄位 -->

        <!-- 右側延展資訊欄位 -->
        <div class="stretched column">
            <!-- 標題 -->
            <div class="ts large header">
                TeaMeow
                <div class="smaller sub header">Not real, but feels.</div>
            </div>
            <!-- / 標題 -->

            <!-- 水平資訊清單 -->
            <div class="ts horizontal list">
                <div class="item">
                    <i class="map marker icon"></i> Taiwan
                </div>
                <div class="item">
                    <i class="link icon"></i> teameow.com
                </div>
                <div class="item">
                    <i class="mail icon"></i> [email protected]
                </div>
            </div>
            <!-- / 水平資訊清單 -->
        </div>
        <!-- / 右側延展資訊欄位 -->
    </div>
    <!-- / 上部網格容器 -->

    <!-- 分頁籤選單 -->
    <div class="ts bottom attached pointing tabbed menu">
        <!-- 選單內容容器 -->
        <div class="ts narrow container">
            <a href="#!" class="active item">
                <i class="code icon"></i>
                程式碼
            </a>
            <a href="#!" class="item">
                <i class="notice circle icon"></i>
                錯誤回報
            </a>
            <a href="#!" class="item">
                <i class="columns icon"></i>
                專案
            </a>
            <a href="#!" class="item">
                <i class="heartbeat icon"></i>
                動向
            </a>
            <a href="#!" class="item">
                <i class="area chart icon"></i>
                統計
            </a>
        </div>
        <!-- / 選單內容容器 -->
    </div>
    <!-- / 分頁籤選單 -->
</div>
<!-- / 倉庫標題板岩 -->