Dash'te İleri Düzey CSS

Dash ve Plotly ile Paneller Oluşturma

Alex Scriven

Data Scientist

Nesneler arası boşluk için CSS

'Kutu Modeli', her HTML öğesini katmanlı bir kutu olarak ele alır:

Nesnenin içeriği (height ve width özellikleri)
İç boşluk (padding, içerik dışında)
Kenarlık (padding ile margin arasında)
Kenar boşluğu (margin, kenarlığın dışında; öğeleri ayırır)

En içten dışa dört dikdörtgen. En içte content, sonra padding, sonra border, en dışta margin yazılı.

Kenarlık ekleme

border CSS argümanı üç öğe alır:

'border':'A B C'
- A = piksel cinsinden kalınlık
- B = stil (Örn., solid veya dotted)
- C = renk (Örn., red)

Uygulamamıza kenarlık ekleme

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

"En Çok Satılan Kategoriler" başlığı; bunun altında, kırmızı noktalı sınır içinde, y ekseninde küçük satın alma kategorileri ve x ekseninde toplam siparişler olan yatay çubuk grafik. Altında, sınır dışında, en iyi iki satış kategorisini belirten bir liste.

CSS boşluklandırma

Bir HTML öğesinin boşluklarını ayarlamak için:

Her özellik için dört sayı belirtin (Padding ve Margin)
- Saat yönünde: üst, sağ, alt, sol
Alternatif: tek sayı (tüm kenarlara uygulanır)
Alternatif: iki sayı; üst-alt ve sol-sağ

Örn., 'padding':'10px 5px 5px 15px'

Kutu modelindeki dikdörtgenler; padding katmanının her yanında sayılar var. Saat yönünde üstten başlayarak: 10, 5, 5, 10

Dash'te padding ekleme

Dolgu yok:

Sınır kavramını gösteren öncekiyle aynı görsel. "En Çok Satılan Kategoriler" başlığı, bunun altında kırmızı noktalı bir sınır içinde, y ekseninde küçük satın alma kategorileri ve x ekseninde toplam siparişler olan yatay çubuk grafik. Bunun altında, sınırın dışında, en iyi iki satış kategorisini belirten bir liste.

'padding':'100px' ekleme:

Sol taraftaki görsele benzer, ancak sınır tüm taraflarda dışarı itilmiş ve bu itişi gösteren geri oklar var. Grafik, başlık ve sınır içi metnin etrafında daha fazla boşluk var; altındaki metin de uzaklaşmış.

Dash'te margin ekleme

Kenar boşluğu yok:

margin: 100px auto ekleme:

Önceki slaydın sağındaki görsele benzer şekilde, ek boşluğu gösteren oklar var. Ancak bu boşluk sınırın dışında. Başlık ve alttaki metin uzaklaşmış, ancak sınır ile grafik arasındaki mesafe aynı kalmış.

Otomatik margin ile ortalama

'margin':'100px' ile

Sınır kavramını gösteren aynı görsel, ancak uzaklaştırılmış ve ortadaki grafik sola hizalı; başlık altında ve alttaki metin üstünde hizalı değil. "En Çok Satılan Kategoriler" başlığı, bunun altında kırmızı noktalı bir sınır içinde yatay çubuk grafik; altında, sınır dışında en iyi iki satış kategorisi listesi.

'margin':'100px auto' ile

Sınır kavramını gösteren aynı görsel. Grafik başlığın altında ve alttaki metnin üstünde ortalanmış. "En Çok Satılan Kategoriler" başlığı, bunun altında kırmızı noktalı bir sınır içinde yatay çubuk grafik; altında, sınır dışında en iyi iki satış kategorisi listesi.

Yerleşim için CSS

Öğeler hizalanmıyor mu? HTML öğeleri 'inline' veya 'block' olabilir.

Inline aynı satırda görünür
- Yükseklik/genişlik (kutu) özellikleri yoktur
- Örnekler: <strong>, <a>, <img>
Block satır kırar, üst üste yığılır
- Yan yana birden fazlası olamaz
- Örnekler: <h1>, <div>
Ayrıca inline-block vardır
- Yükseklik/genişlik/kutu özellikleri ayarlanabilir
- Yan yana olabilir

Inline-block öğeler

<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 şeklinde üç küçük renkli kutu. Mavi kutu, altında kırmızı kutu; kırmızının sağında yeşil kutu.

Hadi pratik yapalım!

Dash ve Plotly ile Paneller Oluşturma