Продвинутый 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», ниже — горизонтальная столбчатая диаграмма внутри красной пунктирной границы, ещё ниже — список двух ведущих категорий.

С добавлением '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).

Строчные отображаются в той же строке
- Не имеют свойств высоты, ширины и блочной модели
- Примеры: <strong>, <a>, <img>
Блочные располагаются друг под другом, так как включают перенос строки
- Несколько таких элементов рядом невозможны
- Примеры: <h1>, <div>
Существует также строчно-блочный тип (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>

Изображение трёх небольших цветных блоков в форме буквы «Г»: синий блок стоит над красным, а справа от красного расположен зелёный.

Давайте потренируемся!

Создание дашбордов с помощью Dash и Plotly