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