Паттерн фона
background-pattern
sm
md
lg
xl
В SIMAI Framework с помощью модифкаторов можно задать паттерны фона.
Классы
| Класс | Значение |
|---|---|
pattern-1 |
url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect x='0' y='0' width='1' height='2'/></svg>); |
pattern-2 |
url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect x='0' y='0' width='2' height='1'/></svg>); |
pattern-3 |
url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect x='0' y='0' width='1' height='1'/></svg>); |
pattern-4 |
url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect x='0' y='1' width='1' height='1' /><rect x='1' y='0' width='1' height='1'/></svg>); |
pattern-5 |
url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect x='0' y='0' width='1' height='1' /><rect x='1' y='1' width='1' height='1' /><rect x='2' y='2' width='1' height='1' /><rect x='3' y='1' width='1' height='1' /><rect x='1' y='3' width='1' height='1' /><rect x='3' y='3' width='1' height='1' /></svg>); |
pattern-6 |
url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect x='0' y='0' width='1' height='1' /></svg>); |
pattern-7 |
url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect x='0' y='0' width='2' height='2' /></svg>); |
pattern-8 |
url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect x='0' y='0' width='3' height='1'/><rect x='0' y='2' width='3' height='1'/><rect x='0' y='0' width='1' height='3'/>><rect x='2' y='0' width='1' height='3'/>><rect x='2' y='0' width='1' height='1'/></svg>); |
pattern-9 |
url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect x='0' y='0' width='3' height='3' /></svg>); |
Описание
Адаптивный модификатор. Задает паттерн фона в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
pattern-{1...20}- установка паттерна 1...20 в качестве фона.
Пример
Используйте модификатор pattern-{1...20} для установки паттерна фона.
pattern-1
pattern-2
pattern-3
pattern-4
pattern-5
pattern-6
pattern-7
pattern-8
pattern-9
<div class="pattern-1 ...">...</div>
<div class="pattern-2 ...">...</div>
<div class="pattern-3 ...">...</div>
<div class="pattern-4 ...">...</div>
<div class="pattern-5 ...">...</div>
<div class="pattern-6 ...">...</div>
<div class="pattern-7 ...">...</div>
<div class="pattern-8 ...">...</div>
<div class="pattern-9 ...">...</div>
Адаптивность
Для установки паттерна, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.
Например, используйте модификатор md:pattern-2 для установки 2 паттерна для экранов размером Medium и больше.
<div class="md:pattern-2 ..."></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.