Dash 的進階 CSS

使用 Dash 與 Plotly 建立儀表板

Alex Scriven

Data Scientist

物件間距的 CSS

「盒模型」將每個 HTML 元素視為有多層的方框：

物件內容（height 與 width 屬性）
內距（content 之外）
邊框（介於內距與外距之間）
外距（邊框之外，用來與其他元素分隔）

四個由小到大同心矩形。最小標示 content，外圈依序為 padding、border、margin。

加入邊框

border 的 CSS 值由三部分組成：

'border':'A B C'
- A = 粗細（像素）
- B = 樣式（例如 solid、dotted）
- C = 顏色（例如 red）

在應用中加上邊框

dcc.Graph(figure=ecom_bar, 
 style={'width':'500px', 
        'height':'450px',
        'border':'5px dotted red'}
         )

一張標題為「Top Sales Categories」的圖。其下方、紅色點線邊框內是水平長條圖，y 軸為細項購買類別，x 軸為訂單總數。邊框外下方有列出前兩大銷售類別的清單。

CSS 間距

設定 HTML 元素的間距：

對每個屬性（Padding 與 Margin）指定 4 個數字
- 順時針為上、右、下、左
或：只給 1 個數字（四邊同值）
或：給 2 個數字，分別是上下與左右

例如：'padding':'10px 5px 5px 15px'

盒模型示意圖，padding 層四邊各有數字。由上方起順時針為 10、5、5、10。

在 Dash 中加入內距

無內距：

與前例相同的邊框示意圖。一張標題為「Top Sales Categories」的圖。其下方、紅色點線邊框內是水平長條圖，y 軸為細項購買類別，x 軸為訂單總數。邊框外下方有列出前兩大銷售類別的清單。

加入 'padding':'100px'：

與左圖相同，但邊框四周被向外推開，並以箭頭標示。邊框內的圖與標題周圍空間變大，邊框外的文字也被推遠。

在 Dash 中加入外距

無外距：

加入 margin: 100px auto：

與前一張投影片右圖相似，以箭頭標示額外空間，但空間在邊框外。標題與下方文字被推開，邊框與圖之間的距離不變。

用 auto 外距置中

範例：'margin':'100px'

與前述邊框示意圖相同，但畫面縮小且中央圖形改為靠左，未置於標題正下與文字正上。標題為「Top Sales Categories」，紅色點線邊框內為水平長條圖；邊框外下方有前兩大銷售類別清單。

範例：'margin':'100px auto'

與前述邊框示意圖相同。圖形置中，位於標題正下方與文字正上方。標題為「Top Sales Categories」，紅色點線邊框內為水平長條圖；邊框外下方有前兩大銷售類別清單。

版面配置的 CSS

元素對不齊？HTML 元素可分為 inline 與 block。

Inline 會排在同一行
- 沒有高度、寬度（或盒子）屬性
- 例如 <strong>、<a>、<img>
Block 會換行並垂直堆疊
- 無法並排多個
- 例如 <h1>、<div>
還有 inline-block
- 可設定高度／寬度／盒子屬性
- 可並排顯示

inline-block 元素

<div style='width:50px;height:50px;
     background-color:blue'></div>
<div style='width:50px;height:50px;
     background-color:red
     ;display:inline-block'></div>
<div style='width:50px;height:50px;
     background-color:green;
     display:inline-block'></div>

三個小色塊呈 L 形排列。藍色在上、紅色在下，紅色右側有綠色。

一起來練習吧！

使用 Dash 與 Plotly 建立儀表板