УрФУ

Divider 🔗

Визуальный разделитель текста

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

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Est optio dolore nostrum quo aspernatur. Sunt eligendi dignissimos ullam nisi quisquam perspiciatis optio iste iure fugiat, qui cum reiciendis ipsa consequatur.


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

<Divider color="black" width="60px" height={ 5 }/>
<Divider color="black" width="100px" height={ 6 }/>
<Divider color="black" width="160px" height={ 7 }/>

Параметры:

color
string

Цвет разделителя
Поддерживаются любые валидные значения CSS (Пример: red, #fff, rgb(255, 255, 255), rgba(255, 255, 255, 0.5))
Значение по умолчанию: white

width
string

Ширина разделителя
Поддерживаются любые валидные значения CSS (Пример: 50px, 5em, 12rem, 30%)
Значение по умолчанию: 50px

height
number

Высота разделителя (в px)
Значение по умолчанию: 4

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)

id
string

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

className
string

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


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

on:click

on:focus

on:blur

on:mouseover

on:mouseleave