УрФУ

Heading 🔗

Аналог стандартных тегов h1 - h6 в HTML

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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

<Heading size={1} margin={{ top: 0 }}>Heading 1</Heading>
<Heading size={2} margin={{ top: 0 }}>Heading 2</Heading>
<Heading size={3} margin={{ top: 0 }}>Heading 3</Heading>

Параметры:

size
enum
required

Размер заголовка.
Поддерживаются значения от 1 до 6

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

node
HTMLElement

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

align
enum

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

id
string

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

className
string

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


Поддерживаемые события:

on:click

on:focus

on:blur

on:mouseover

on:mouseleave

on:mouseup

on:mousedown