Section 🔗

Кнопки являются неотъемлимой частью современных веб-приложений

Пример использования:

Исходный код для примера выше:

<Section align="left" contentWidth="800px">
    <Heading align="left" size={2}>Пример слева</Heading>
</Section>
<Section align="center" contentWidth="800px">
    <Heading align="center" size={2}>Пример посередине</Heading>
</Section>
<Section align="right" contentWidth="800px">
    <Heading align="right" size={2}>Пример справа</Heading>
</Section>

Параметры:

padding

object

Объект, описывающий отступы компонента. Имеет следующие свойства:
x – отступ по горизонтали
y – отступ по вертикали
top – отступ сверху
bottom – отступ снизу
left – отступ слева
right – отступ справа
Все значения могут иметь один из двух типов: string или number
В случае, если значение одного из свойств имеет тип number, ему будет добавлена единица измерения em
Пример: padding={{ top: 1, x: 'auto' }} будет преобразовано в padding: 1em auto 0

node

HTMLElement

Параметр для связки с HTML-элементом, который лежит в основе компонента
(аналог стандартного bind:this)

id

string

Аналог стандартного атрибута id

className

string

Аналог стандартного атрибута class

contentWidth

string

Максимальная ширина, которую может занимать компонент

align

enum

Выравнивание контента внутри компонента
Поддерживаются 5 значений: unset, initial, left, center и right
Значение по умолчанию: center