@snack-uikit/divider

Divider

Installation

npm i @snack-uikit/divider

Changelog

Description

• Пакет @snack-uikit/divider предоставляет простой компонент Divider для визуального отделения логических блоков интерфейса.
• Компонент может отображаться в горизонтальной или вертикальной ориентации и поддерживает несколько вариантов толщины линии для выстраивания визуальной иерархии.
• Divider не содержит собственного контента и используется как вспомогательный элемент разметки: между группами карточек, секциями формы, блоками в сайдбаре и других контейнерах.
• Figma: Snack UI Kit — Divider.

Example

import { Divider } from '@snack-uikit/divider';

function Example() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <div>
        <div>Блок контента 1</div>
        <Divider orientation='horizontal' weight='regular' />
        <div>Блок контента 2</div>
      </div>

      <Divider orientation='vertical' weight='light' />

      <div>
        <div>Блок контента 3</div>
        <Divider />
        <div>Блок контента 4</div>
      </div>
    </div>
  );
}

Divider

Компонент для визуального отделения групп компонентов

Props