Panels

Panels 也是一個容器,與 Cards 相似,主要區別在於 Panels 用來製作像是資料區塊組件,適合用在 Desktop Web 上,雖然可以使用 Class 來將 Cards 與 Panels 合併在一起,但為了考量未來擴充,還是把這倆個傢伙分開來。所有跟 Panels 有關的元件將會以 .panel-為開頭。

預設樣式

<div> 加上 .panel,而內容元件可以使用 .panel-box 來放置內容。

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。

<div class="panel">
    <div class="panel-box">
        <p>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。</p>
    </div>
</div>

你也可以放置更多不同的內容,例如標題或是連結。

臺灣 - 維基百科

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。

維基百科
<div class="panel">
    <div class="panel-box">
        <h4>臺灣 - 維基百科<h4>
        <p>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。</p>
        <a class="panel-link">維基百科</a>
    </div>
</div>

Header 與 Footer

在 panel 裡除了 .panel-box 之外,還可以設置 .panel-header.panel-footer

Panel Title

<div class="panel">
    <div class="panel-header">
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-box">
        ~略~
    </div>
    <div class="panel-footer">Panel Footer</div>
</div>

Toolbar

如果需要放置一個工具列時,可以在 .panel 裡增加 .panel-toolbar 的元件。

Panel Title

# Thead - Product name Unit Price Amount Subtotal
1 SONY Xperia Z C6602 - Black NTD 21,900 1 NTD 21,900
2 Apple MacBook Pro 13-inch retina NTD 53,900 1 NTD 53,900
3 Dell UltraSharp U2711 27-inch NTD 23,699 1 NTD 23,699
<div class="panel">
    <div class="panel-header">
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <form class="panel-box panel-toolbar">
        <input type="text" class="ctrl-input" />
        <button class="btn color-common pull-right">Filter</button>
    </form>
    <div class="panel-box">
        ~略~
    </div>
    <div class="panel-footer">Panel Footer</div>
</div>