Div 🔗
Универсальный блок для упрощения вёрстки
Пример использования:
Текст внутри
Div
Исходный код для примера выше:
<Div align="center" margin={{ y: 1 }} padding={{ y: 1, x: 1 }} className="bordered-div">
Текст внутри <code>Div</code>
</Div>
<style>
:global(.bordered-div) {
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
</style>Параметры:
color string
Цвет текста в компоненте.
Поддерживаются любые валидные значения CSS (Например: #0000FF, var(--blue) или magenta)
Значение по умолчанию: black
margin object
Объект, описывающий внешние отступы компонента. Имеет следующие свойства:
x – отступ по горизонтали
y – отступ по вертикали
top – отступ сверху
bottom – отступ снизу
left – отступ слева
right – отступ справа
Все значения могут иметь один из двух типов: string или number
В случае, если значение одного из свойств имеет тип number, ему будет добавлена единица измерения em
Пример: margin={{ top: 1, x: 'auto' }} будет преобразовано в margin: 1em auto 0
padding object
Объект, описывающий внутренние отступы компонента. Имеет следующие свойства:
x – отступ по горизонтали
y – отступ по вертикали
top – отступ сверху
bottom – отступ снизу
left – отступ слева
right – отступ справа
Все значения могут иметь один из двух типов: string или number
В случае, если значение одного из свойств имеет тип number, ему будет добавлена единица измерения em
Пример: padding={{ top: 1, x: 'auto' }} будет преобразовано в padding: 1em auto 0
align enum
Выравнивание текста внутри компонента
Поддерживаются 5 значений: unset, initial, left, center и right
Значение по умолчанию: unset
inline boolean
Если этот параметр установлен (имеет значение true), то к компоненту будет применено свойство display: inline-block
Иначе – display: block
Значение по умолчанию: false
transition object
Объект, описывающий переходы для компонента. Имеет следующие свойства:
in – переход при монтировании компонента
out – переход при демонтировании компонента
Каждое из этих свойств может содержать в себе объект со следующими свойствами:
func – функция, выполняющая переход от начального состояния к конечному
options – опциональный объект с опциональными свойствами delay, duration и easing
Подробнее: Документация по Svelte
node HTMLElement
Параметр для связки с HTML-элементом, который лежит в основе компонента
(аналог стандартного bind:this)
id string
Аналог стандартного атрибута id
className string
Аналог стандартного атрибута class