Просунуте CSS у Dash

Створення дашбордів з Dash і Plotly

Alex Scriven

Data Scientist

CSS для відступів між об'єктами

«Блокова модель» розглядає кожен HTML-елемент як коробку з шарами:

Вміст об'єкта (властивості height і width)
Внутрішні відступи (padding) — поза вмістом
Рамка (border) — між padding і margin
Зовнішні відступи (margin) — поза рамкою, розділяють елементи

Зображення чотирьох прямокутників один у одному від найменшого до найбільшого. Найменший містить слово content, наступне кільце — padding, далі — border, останнє — margin.

Додаємо рамку

Аргумент CSS border має три складові:

'border':'A B C'
- A = товщина у пікселях
- B = стиль (напр., solid або dotted)
- C = колір (напр., red)

Рамка в нашому застосунку

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

Зображення з заголовком "Top Sales Categories"; під ним, всередині червоної пунктирної рамки, — горизонтальна стовпчикова діаграма з дрібними категоріями покупок на осі Y та загальною кількістю замовлень на осі X. Нижче, поза рамкою, — список із двома топкатегоріями продажів.

CSS-відступи

Щоб задати відступи для HTML-елемента:

Задайте чотири числа для кожної властивості (Padding і Margin)
- За годинниковою стрілкою: верх, праворуч, низ, ліворуч
Або одне число — для всіх сторін
Або два — для верх-низ і ліво-право

Наприклад, 'padding':'10px 5px 5px 15px'

Зображення прямокутників з «блокової моделі», де шар padding має числа на кожному боці. У центрі кожного боку — число. За годинниковою стрілкою від верху: 10, 5, 5, 10

Додаємо padding у Dash

Без padding:

Те саме зображення, що й раніше для ілюстрації рамки. Заголовок "Top Sales Categories", під ним, у червоній пунктирній рамці, — горизонтальна діаграма; на осі Y — дрібні категорії покупок, на осі X — загальна кількість замовлень. Нижче, поза рамкою, — список двох топкатегорій продажів.

Додаємо 'padding':'100px':

Те саме зображення, що ліворуч на попередньому слайді, але рамку відтиснуто з усіх боків; стрілки показують відштовхування. Усередині рамки стало більше простору навколо графіка та заголовка, а текст унизу віддалено.

Додаємо margin у Dash

Без margin:

Додаємо margin: 100px auto:

Подібно до правого зображення на попередньому слайді, стрілки показують додатковий простір. Але цей простір — поза рамкою. Заголовок і текст нижче відсунуті, а відстань між рамкою та графіком не змінилась.

Центрування з auto margin

З 'margin':'100px'

Те саме зображення для ілюстрації рамки, але масштаб зменшено, а центральний графік вирівняно ліворуч, тож він не під заголовком і не над текстом. Заголовок "Top Sales Categories", під ним у червоній пунктирній рамці — горизонтальна діаграма; нижче — список двох топкатегорій продажів.

З 'margin':'100px auto'

Те саме зображення для ілюстрації рамки. Графік вирівняно по центру під заголовком і над текстом. Заголовок "Top Sales Categories", під ним у червоній пунктирній рамці — горизонтальна діаграма; нижче — список двох топкатегорій продажів.

CSS для компонування

Елементи не вирівнюються? HTML-елементи бувають «inline» або «block».

Inline відображаються в одному рядку
- Не мають властивостей height/width (і «коробки»)
- Приклади: <strong>, <a>, <img>
Block стають один під одним, бо містять розрив рядка
- Не можна розмістити кілька поруч
- Приклади: <h1>, <div>
Є також inline-block
- Можна задавати height/width/box-властивості
- Можна розміщувати поруч

Елементи 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>

Зображення трьох маленьких кольорових блоків у формі літери L. Синій блок над червоним, праворуч від червоного — зелений.

Давайте потренуємось!

Створення дашбордів з Dash і Plotly