CSS tingkat lanjut di Dash

Membangun Dasbor dengan Dash dan Plotly

Alex Scriven

Data Scientist

CSS untuk jarak antarobjek

'Box Model' menganggap setiap elemen HTML sebagai kotak berlapis:

Konten objek (properti height & width)
Padding (di luar konten)
Border (antara padding dan margin)
Margin (di luar border, memisahkan elemen)

Gambar empat persegi panjang bersarang dari kecil ke besar. Paling kecil bertuliskan content, lalu padding, lalu border, dan paling luar margin.

Menambahkan border

Argumen CSS border memiliki tiga elemen:

'border':'A B C'
- A = ketebalan (piksel)
- B = gaya (mis. solid atau dotted)
- C = warna (mis. red)

Border pada aplikasi kita

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

Sebuah judul "Top Sales Categories"; di bawahnya, di dalam border merah putus-putus, ada diagram batang horizontal dengan kategori pembelian kecil di sumbu y dan total pesanan di sumbu x. Di bawahnya, di luar border, ada daftar yang mencatat dua kategori penjualan teratas.

CSS untuk spasi

Untuk mengatur jarak pada elemen HTML:

Tentukan empat angka per properti (Padding & Margin)
- Urutan searah jarum jam: atas, kanan, bawah, kiri
Atau: satu angka (diterapkan ke semua sisi)
Atau: dua angka untuk atas-bawah dan kiri-kanan

Contoh: 'padding':'10px 5px 5px 15px'

Gambar persegi panjang model kotak dengan lapisan padding memiliki angka di tiap sisi. Di tengah tiap sisi ada angka. Urutan searah jarum jam mulai dari atas: 10, 5, 5, 10

Menambahkan padding di Dash

Tanpa padding:

Gambar yang sama seperti sebelumnya untuk konsep border. Sebuah judul "Top Sales Categories"; di bawahnya, di dalam border merah putus-putus, ada diagram batang horizontal dengan kategori pembelian kecil di sumbu y dan total pesanan di sumbu x. Di bawahnya, di luar border, ada daftar yang mencatat dua kategori penjualan teratas.

Menambahkan 'padding':'100px':

Gambar sama di sisi kiri, namun border terdorong keluar di semua sisi, dengan panah kembali untuk menandai dorongan. Ada lebih banyak ruang di sekitar grafik, dan judul, konten di dalam border, serta teks di bawah terdorong menjauh.

Menambahkan margin di Dash

Tanpa margin:

Menambahkan margin: 100px auto:

Mirip dengan gambar kanan pada slide sebelumnya, ada panah yang menandai ruang tambahan. Namun, ruang ini berada di luar border. Judul dan teks di bawah terdorong keluar, tetapi jarak antara border dan grafik tetap sama.

Meluruskan tengah dengan margin auto

Dengan: 'margin':'100px'

Gambar sama untuk konsep border, namun dizoom keluar, dan grafik tengah rata kiri, sehingga tidak tepat di bawah judul dan di atas teks. Sebuah judul "Top Sales Categories"; di bawahnya, di dalam border merah putus-putus, ada diagram batang horizontal dengan kategori pembelian kecil di sumbu y dan total pesanan di sumbu x. Di bawahnya, di luar border, ada daftar dua kategori penjualan teratas.

Dengan: 'margin':'100px auto'

Gambar sama seperti sebelumnya untuk konsep border. Grafik rata tengah di bawah judul dan di atas teks. Sebuah judul "Top Sales Categories"; di bawahnya, di dalam border merah putus-putus, ada diagram batang horizontal dengan kategori pembelian kecil di sumbu y dan total pesanan di sumbu x. Di bawahnya, di luar border, ada daftar dua kategori penjualan teratas.

CSS untuk tata letak

Elemen tidak sejajar? Elemen HTML bisa bertipe 'inline' atau 'block'.

Inline dirender pada baris yang sama
- Tidak punya properti height/width (atau box)
- Contoh: <strong>, <a>, <img>
Block menumpuk vertikal karena ada jeda baris
- Tidak bisa berdampingan lebih dari satu
- Contoh: <h1>, <div>
Ada juga inline-block
- Dapat mengatur properti height/width/box
- Dapat berdampingan

Elemen 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>

Gambar tiga kotak berwarna kecil membentuk huruf L. Kotak biru di atas kotak merah, dan kotak hijau di kanan kotak merah.

Ayo berlatih!

Membangun Dasbor dengan Dash dan Plotly