Обводка
stroke-width
sm
md
lg
xl
В SIMAI Framework с помощью модифкаторов можно управлять толщиной линии обводки SVG-элементов.
Классы
| Класс | Значение |
|---|---|
stroke-0 |
stroke-width: 0;
|
stroke-1 |
stroke-width: 1;
|
stroke-2 |
stroke-width: 2;
|
stroke-3 |
stroke-width: 3;
|
stroke-4 |
stroke-width: 4;
|
Описание
Адаптивный модификатор. Задает толщину обводки SVG-элементов в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр.
Пример
Используйте модификаторы stroke-{0...9} чтобы установить соответствующую толщину обводки SVG-элемента.
<svg class="stroke-2">
<!-- ... -->
</svg>Адаптивность
Для установки толщины обводки SVG-элементов, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:stroke-3 для установки второй толщины обводки для экранов размером Medium и больше.
<div class="md:stroke-3 ..."></div>
Для получения дополнительной информации об адаптивности в SIMAI Framework ознакомьтесь с документацией.