Tocas: Attached segment 無法移除分隔框線

[goodjack]

想做類似 Product Hunt 的佈局

但是分隔線好像一直存在
試著加入 .flatted .borderless 還是存在

<div class="ts attached  very padded horizontally fitted fluid flatted borderless secondary segment">
    <div class="ts container">
        <div class="ts huge header">標題 segment</div>
    </div>
</div>

<div class="ts attached very padded horizontally fitted fluid flatted borderless secondary segment">
    <div class="ts container grid">
        <div class="eleven wide column">
            <div class="ts card">
                <div class="image">
                    <img src="https://tocas-ui.com/assets/img/15d7510.png">
                </div>
                <div class="content">
                    <div class="header">
                        Yami Odymel
                    </div>
                    <div class="description">
                        看似最重要的東西卻沒能被妥善利用， 沒有人能發現這一點，因為他們早已活在過去， 才剛開始的序章卻被放在頁尾。
                    </div>
                </div>
            </div>
        </div>
        <div class="five wide column">
            <div class="ts container">
                <div class="ts large header">右邊側欄</div>
            </div>
        </div>
    </div>
</div>

---

這個範例應該比較明顯，
有點類似單頁式網頁的架構

<div class="ts attached very padded horizontally fitted fluid flatted borderless segment">
    <div class="ts large header">第一個 segment</div>
</div>
<div class="ts attached very padded horizontally fitted fluid flatted borderless segment">
    <div class="ts large header">第二個 segment</div>
</div>

---

另外藉此請問：

1. 從範例看 segment 應該是可以用 attached？
   文件好像沒提到，是不是我用錯方法了？

2. 這種佈局我是不是應該在同一個 grid 比較恰當？

3. 無邊框的 segment 是不是還會有陰影？
   看起來無邊框的 card 沒有陰影

4. 之後會有 Carousel
   或是像上面 Product Hunt、app 商店/購物網站 的預覽圖設計嗎

這次話好多，感謝耐心 🙏

[YamiOdymel]

原本還花了點時間搞了個仿 Product Hunt 的介面，結果發現有太多地方對齊怪怪的，要手動加上 Style 覆寫，最後搞得一塌糊塗就像我做任何事一樣，還意外發現這根本是我人生寫照。

基於最後範例搞得夭壽亂也就沒辦法貼上來了，不過基本的介面雛形就是像下面這樣。

<div class="ts secondary segment">
    <!-- 頂部網格容器 -->
    <div class="ts narrow relaxed grid container">
        <!-- 左側標題欄位 -->
        <div class="stretched column">
            <div class="ts segment"></div>
        </div>
        <!-- / 左側標題欄位 -->

        <!-- 右側排行按鈕 -->
        <div class="column">
            <div class="ts segment"></div>
        </div>
        <!-- / 右側排行按鈕 -->
    </div>
    <!-- / 頂部網格容器 -->

    <!-- 下部網格容器 -->
    <div class="ts narrow relaxed grid container">
        <!-- 左側卡片欄位 -->
        <div class="ten wide column">
            <div class="ts segment"></div>
        </div>
        <!-- / 左側卡片欄位 -->

        <!-- 右側資訊欄位 -->
        <div class="six wide column">
            <div class="ts segment"></div>
        </div>
        <!-- / 右側資訊欄位 -->
    </div>
    <!-- / 下部網格容器 -->
</div>

順帶一提 flatted 基本上在 Tocas UI 3 被完全移除了，因為那個東西基本上蠻被濫用導致 Class 充滿了一堆雜七雜八的東西。

原本還考慮說要不要乾脆 Flatted 的樣式當作全域預設值算了，不過⋯⋯還沒打算這麼做就是了。

[YamiOdymel]

從範例看 segment 應該是可以用 attached？
文件好像沒提到，是不是我用錯方法了？

Segment、Button、Cards 都有支援 Attached，而且他們可以交互使用（例如 top attached button + bottom attached segment），文件應該都有提到，除非我腦袋爬代忘記寫了。

這種佈局我是不是應該在同一個 grid 比較恰當？

對，或者你可以分兩個（上半部、下半部，就像我給的範例）。

無邊框的 segment 是不是還會有陰影？
看起來無邊框的 card 沒有陰影

這是個好問題，所以我創了個重新審視 Segment 的 Basic 和 Borderless，並解決 Borderless 的 Shadow #637。

之後會有 Carousel
或是像上面 Product Hunt、app 商店/購物網站 的預覽圖設計嗎

Tocas 的 Carousel 沒有預覽圖，基本上也不會有（畢竟這有點太客製化了？）。

不過要達到這樣的做法，實際上就只要自己陳列圖片的縮圖，然後每張圖片都透過 JavaScript 綁定要讓 Carousel 跳到哪一張就可以了。

進階一點，順便監聽 Carousel 的 onChange 事件來在切換幻燈片時決定要「高亮」哪張預覽圖（表示此圖片正在展示中）。

[goodjack]

感謝用心 🙏🙏

所以像那個 Website 按鈕是用 Card 實現的嗎
那個看起來是個很複雜的地方

[YamiOdymel]

基本上只是用 Segment 跟 Grid 稍微測試組合而已，不過因為 Header 的 Line Height 有點智障所以加上了 style 手動覆寫（之後想解決這問題）。

Demo

<div class="ts segment">
    <div class="ts grid">
        <!-- 左側文字與圖示 -->
        <div class="stretched column">
            <div class="ts small header" style="line-height: 1.2em;">
                <i class="settings icon"></i>
                <div class="content">
                    Website
                    <div class="sub header" style="line-height: initial;">tocas.github.io</div>
                </div>
            </div>
        </div>
        <!-- / 左側文字與圖示 -->

        <!-- 右側置中箭頭 -->
        <div class="column" style="display: flex; align-items: center;">
            <i class="icon right chevron"></i>
        </div>
        <!-- / 右側置中箭頭 -->
    </div>
</div>