Pokročilé CSS v Dash

Tvorba dashboardů s Dash a Plotly

Alex Scriven

Data Scientist

CSS pro rozmístění prvků

„Box model" považuje každý HTML prvek za rámeček s vrstvami:

Obsah prvku (vlastnosti height a width)
Padding (vně obsahu)
Border (mezi paddingem a marginem)
Margin (vně borderu, odděluje prvky od sebe)

Čtyři vnořené obdélníky od nejmenšího po největší. Nejmenší obsahuje slovo „content", další vrstva je „padding", pak „border" a vnější vrstva je „margin".

Přidání ohraničení

Argument CSS border přijímá tři hodnoty:

'border':'A B C'
- A = tloušťka v pixelech
- B = styl (např. solid nebo dotted)
- C = barva (např. red)

Ohraničení v naší aplikaci

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

Obrázek s nadpisem „Top Sales Categories", pod ním uvnitř červeného tečkovaného ohraničení vodorovný sloupcový graf s kategoriemi na ose y a celkovými objednávkami na ose x. Pod ohraničením je seznam dvou nejlepších kategorií.

CSS mezery

Nastavení mezery HTML prvku:

Zadejte čtyři hodnoty pro každou vlastnost (padding a margin)
- Po směru hodinových ručiček: nahoře, vpravo, dole, vlevo
Alternativně: jedna hodnota (platí pro všechny strany)
Alternativně: dvě hodnoty pro nahoře/dole a vlevo/vpravo

Např. 'padding':'10px 5px 5px 15px'

Obrázek box modelu s čísly na každé straně vrstvy padding. Po směru hodinových ručiček od shora: 10, 5, 5, 10.

Přidání odsazení (padding) v Dash

Bez odsazení:

Stejný obrázek jako dříve ilustrující koncept ohraničení. Obrázek s nadpisem „Top Sales Categories", pod ním uvnitř červeného tečkovaného ohraničení vodorovný sloupcový graf s kategoriemi na ose y a celkovými objednávkami na ose x. Pod ohraničením je seznam dvou nejlepších kategorií.

Přidání 'padding':'100px':

Stejný obrázek jako vlevo, avšak ohraničení je ze všech stran odsunuto dál – šipky to znázorňují. Kolem grafu je více místa, nadpis a text pod ním jsou posunuty.

Přidání okraje (margin) v Dash

Bez okraje (margin):

Přidání margin: 100px auto:

Podobně jako pravý obrázek na předchozím snímku jsou znázorněny šipky s extra prostorem, tentokrát však vně ohraničení. Nadpis a text pod ním jsou posunuty, prostor mezi ohraničením a grafem zůstává stejný.

Vycentrování pomocí auto margin

S: 'margin':'100px'

Stejný obrázek jako dříve ilustrující koncept ohraničení, ale oddálený – centrální graf je zarovnán vlevo, není tedy pod nadpisem ani nad textem. Uvnitř červeného tečkovaného ohraničení je vodorovný sloupcový graf s kategoriemi na ose y a objednávkami na ose x. Pod ohraničením je seznam dvou nejlepších kategorií.

S: 'margin':'100px auto'

Stejný obrázek jako dříve ilustrující koncept ohraničení. Graf je vycentrován pod nadpisem a nad textem. Uvnitř červeného tečkovaného ohraničení je vodorovný sloupcový graf s kategoriemi na ose y a objednávkami na ose x. Pod ohraničením je seznam dvou nejlepších kategorií.

CSS pro rozvržení

Prvky se nezarovnávají? HTML prvky mohou být „inline" nebo „block".

Inline se vykreslují na stejném řádku
- Nemají vlastnosti výšky, šířky ani boxu
- Příklady: <strong>, <a>, <img>
Block se skládají pod sebe (obsahují zalomení řádku)
- Nelze zobrazit více vedle sebe
- Příklady: <h1>, <div>
Existuje také inline-block
- Lze nastavit výšku, šířku a vlastnosti boxu
- Lze zobrazit vedle sebe

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

Tři malé barevné čtverce do tvaru písmene L. Modrý čtverec je nahoře, pod ním červený a vpravo od červeného zelený.

Pojďme si procvičit!

Tvorba dashboardů s Dash a Plotly