CSS nâng cao trong Dash

Xây dựng Dashboard với Dash và Plotly

Alex Scriven

Data Scientist

CSS cho khoảng cách giữa đối tượng

"Mô hình Hộp" xem mỗi phần tử HTML là một hộp nhiều lớp:

Nội dung (thuộc tính height & width)
Padding (ngoài nội dung)
Border (giữa padding và margin)
Margin (ngoài border, tách các phần tử)

Thêm border

Đối số CSS border gồm ba thành phần:

'border':'A B C'
- A = độ dày (px)
- B = kiểu (vd. solid hoặc dotted)
- C = màu (vd. red)

Border trên ứng dụng của ta

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

Hình có tiêu đề "Top Sales Categories"; bên dưới, trong viền đỏ chấm, là biểu đồ thanh ngang với danh mục mua nhỏ ở trục y và tổng đơn hàng ở trục x. Bên dưới, ngoài viền, là danh sách nêu hai danh mục bán chạy nhất.

Khoảng cách trong CSS

Để đặt khoảng cách cho phần tử HTML:

Chỉ định bốn số cho mỗi thuộc tính (Padding & Margin)
- Theo chiều kim đồng hồ: trên, phải, dưới, trái
Hoặc: một số (áp dụng mọi phía)
Hoặc: hai số cho trên-dưới và trái-phải

Ví dụ: 'padding':'10px 5px 5px 15px'

Hình mô hình hộp với lớp padding có số ở mỗi cạnh. Theo chiều kim đồng hồ từ trên: 10, 5, 5, 10.

Thêm padding trong Dash

Không có padding:

Cùng hình như trước minh họa khái niệm viền. Hình có tiêu đề "Top Sales Categories"; bên dưới, trong viền đỏ chấm, là biểu đồ thanh ngang với danh mục mua nhỏ ở trục y và tổng đơn hàng ở trục x. Bên dưới, ngoài viền, là danh sách nêu hai danh mục bán chạy nhất.

Thêm 'padding':'100px':

Cùng hình như bên trái, nhưng viền được đẩy ra mọi phía, có mũi tên ngược chỉ sự đẩy này. Có nhiều khoảng trống hơn quanh biểu đồ; tiêu đề (trong viền) và văn bản bên dưới bị đẩy xa.

Thêm margin trong Dash

Không có margin:

Thêm margin: 100px auto:

Tương tự hình bên phải ở slide trước, có mũi tên chỉ thêm khoảng trống. Tuy nhiên, khoảng trống này nằm ngoài viền. Tiêu đề và văn bản bên dưới bị đẩy ra, nhưng khoảng giữa viền và biểu đồ giữ nguyên.

Căn giữa với margin auto

Với: 'margin':'100px'

Cùng hình như trước minh họa khái niệm viền, nhưng phóng nhỏ và biểu đồ căn trái, không nằm dưới tiêu đề và trên văn bản. Hình có tiêu đề "Top Sales Categories"; bên dưới, trong viền đỏ chấm, là biểu đồ thanh ngang với danh mục mua nhỏ ở trục y và tổng đơn hàng ở trục x. Bên dưới, ngoài viền, là danh sách nêu hai danh mục bán chạy nhất.

Với: 'margin':'100px auto'

Cùng hình như trước. Biểu đồ được căn giữa dưới tiêu đề và trên văn bản bên dưới. Hình có tiêu đề "Top Sales Categories"; bên dưới, trong viền đỏ chấm, là biểu đồ thanh ngang với danh mục mua nhỏ ở trục y và tổng đơn hàng ở trục x. Bên dưới, ngoài viền, là danh sách nêu hai danh mục bán chạy nhất.

CSS cho bố cục

Phần tử không thẳng hàng? Phần tử HTML có thể là 'inline' hoặc 'block'.

Inline hiển thị trên cùng một dòng
- Không có thuộc tính chiều cao/rộng (hộp)
- Ví dụ: <strong>, <a>, <img>
Block xếp chồng do có ngắt dòng
- Không thể đặt nhiều cái cạnh nhau
- Ví dụ: <h1>, <div>
Cũng có inline-block
- Có thể đặt chiều cao/rộng/thuộc tính hộp
- Có thể đặt cạnh nhau

Phần tử 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>

Hình ba ô màu nhỏ xếp hình chữ L. Ô xanh dương trên ô đỏ; ô xanh lá ở bên phải ô đỏ.

Ayo berlatih!

Xây dựng Dashboard với Dash và Plotly