Zaawansowane CSS w Dash

Tworzenie dashboardów z Dash i Plotly

Alex Scriven

Data Scientist

CSS – odstępy między obiektami

Model pudełkowy (Box Model) traktuje każdy element HTML jako pudełko z warstwami:

Zawartość obiektu (właściwości height i width)
Padding (na zewnątrz zawartości)
Border (między padding a margin)
Margin (na zewnątrz border, oddziela elementy)

Obraz czterech zagnieżdżonych prostokątów od najmniejszego do największego. Najmniejszy oznaczony jako „content", kolejne warstwy to: padding, border i margin.

Dodawanie obramowania

Argument CSS border przyjmuje trzy elementy:

'border':'A B C'
- A = grubość w pikselach
- B = styl (np. solid lub dotted)
- C = kolor (np. red)

Obramowanie w naszej aplikacji

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

Obraz tytułu „Top Sales Categories", poniżej, wewnątrz czerwonej przerywanej ramki, poziomy wykres słupkowy z kategoriami zakupów na osi Y i łączną liczbą zamówień na osi X. Poniżej ramki lista dwóch najlepszych kategorii.

Odstępy w CSS

Ustawianie odstępów elementu HTML:

Podaj cztery wartości dla każdej właściwości (Padding i Margin)
- Zgodnie z ruchem wskazówek zegara: góra, prawo, dół, lewo
Alternatywnie: jedna wartość (stosowana do wszystkich stron)
Alternatywnie: dwie wartości dla góra-dół i lewo-prawo

Np. 'padding':'10px 5px 5px 15px'

Obraz prostokątów modelu pudełkowego z warstwą padding oznaczoną liczbami po każdej stronie. Zgodnie z ruchem wskazówek zegara od góry: 10, 5, 5, 10.

Dodawanie padding w Dash

Bez padding:

Ten sam obraz co poprzednio ilustrujący koncepcję obramowania. Obraz tytułu „Top Sales Categories", poniżej, wewnątrz czerwonej przerywanej ramki, poziomy wykres słupkowy z kategoriami zakupów na osi Y i łączną liczbą zamówień na osi X. Poniżej ramki lista dwóch najlepszych kategorii.

Dodanie 'padding':'100px':

Ten sam obraz co po lewej, jednak ramka została odsunięta na wszystkich bokach – strzałki wskazują to odsunięcie. Wokół wykresu jest więcej przestrzeni, a tytuł i tekst poniżej zostały przesunięte.

Dodawanie margin w Dash

Bez margin:

Dodanie margin: 100px auto:

Podobnie jak obraz po prawej na poprzednim slajdzie, strzałki wskazują dodatkową przestrzeń. Tym razem przestrzeń jest na zewnątrz ramki. Tytuł i tekst poniżej zostały przesunięte, ale odstęp między ramką a wykresem pozostał bez zmian.

Wyśrodkowanie za pomocą auto margin

Z: 'margin':'100px'

Ten sam obraz co poprzednio ilustrujący koncepcję obramowania, jednak oddalony – centralny wykres jest wyrównany do lewej, poniżej tytułu i powyżej tekstu. Wewnątrz czerwonej przerywanej ramki poziomy wykres słupkowy z kategoriami na osi Y i zamówieniami na osi X. Poniżej ramki lista kategorii.

Z: 'margin':'100px auto'

Ten sam obraz co poprzednio ilustrujący koncepcję obramowania. Wykres jest wyśrodkowany pod tytułem i nad tekstem poniżej. Wewnątrz czerwonej przerywanej ramki poziomy wykres słupkowy z kategoriami na osi Y i zamówieniami na osi X. Poniżej ramki lista kategorii.

CSS – układ elementów

Elementy się nie wyrównują? Elementy HTML mogą być „inline" lub „block".

Inline renderowane są w tej samej linii
- Nie mają właściwości height, width ani box
- Przykłady: <strong>, <a>, <img>
Block układają się jeden pod drugim (zawierają podział wiersza)
- Nie mogą być umieszczone obok siebie
- Przykłady: <h1>, <div>
Istnieje też inline-block
- Można ustawiać height/width/box
- Mogą być umieszczone obok siebie

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

Obraz trzech małych kolorowych kwadratów w kształcie litery L. Niebieski kwadrat jest nad czerwonym, a zielony kwadrat znajduje się po prawej stronie czerwonego.

Let's practice!

Tworzenie dashboardów z Dash i Plotly