Лэйаут

Divider

Разделитель. В React рендерит настоящий <hr>, поэтому для скринридеров это ориентир, а не декоративный div.

чистая разметка — библиотеки на странице нет

отрендерил aura-react

отрендерил aura-vue

отрендерил aura-svelte

собрано из классов самого aura-angular

Above

Below

Left

Right

Above

Below

Left

Right

Above

Below

Left

Right

Above

Below

Left

Right

Above

Below

Left

Right

Код

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-4);width:100%;">
  <p class="aura-text aura-text--body" style="">Above</p>
  <hr class="aura-divider">
  <p class="aura-text aura-text--body" style="">Below</p>
  <div class="aura-divider aura-divider--labelled" role="separator" aria-orientation="horizontal" aria-label="or"><span class="aura-divider__label" aria-hidden="true">or</span></div>
  <div class="aura-group" style="--aura-gap:var(--space-3);--aura-align:center;height:32px;">
    <p class="aura-text aura-text--body" style="">Left</p>
    <hr class="aura-divider aura-divider--vertical">
    <p class="aura-text aura-text--body" style="">Right</p>
  </div>
</div>

Demo.tsx

import { Group, Divider, Stack, Typography } from '@ilomee/aura-react';

export default function Demo() {
  return (
    <Stack gap={4} style={{ width: '100%' }}>
      <Typography variant="body">Above</Typography>
      <Divider />
      <Typography variant="body">Below</Typography>
      <Divider label="or" />

      <Group align="center" style={{ height: 32 }}>
        <Typography variant="body">Left</Typography>
        <Divider orientation="vertical" />
        <Typography variant="body">Right</Typography>
      </Group>
    </Stack>
  );
}

Demo.vue

<script setup lang="ts">
import { Divider } from '@ilomee/aura-vue';
</script>

<template>
  <Divider />
  <Divider label="or" />
  <Divider orientation="vertical" />
</template>

Demo.svelte

<script lang="ts">
  import { Divider } from '@ilomee/aura-svelte';
</script>

<Divider />
<Divider label="or" />
<Divider orientation="vertical" />

Используется как [auraDivider] — директива, которую вы вешаете на свой элемент.

demo.component.ts

import { AuraDivider } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraDivider],
  template: `<hr auraDivider />`,
})
export class DemoComponent {}

Расхождения с React-эталоном

Нет label. Остальные три — компоненты и могут поменять элемент, который рендерят: <hr> пустой, поэтому подписанная линия обязана стать <div role="separator"> со span внутри. Здесь же директива на элементе, который вы написали сами, — она добавляет классы и атрибуты и не может добавить потомка. Разметка — три строки и даёт тот же DOM: <div auraDivider class="aura-divider--labelled" role="separator" aria-label="or"><span class="aura-divider__label" aria-hidden="true">or</span></div>. Превращение в компонент это чинит и заодно ломает каждый уже написанный <hr auraDivider>.

Пропсы

У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.

Имя	Тип	По умолчанию	Примечания
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`
label	`string`	—	Слова посреди линии — «или», «Личное», «Раньше». С подписью меняется сам элемент: `<hr>` пустой, положить слова некуда, поэтому подписанный вариант — это `<div role="separator">`, та же роль, что была у `<hr>` неявно. Слова несёт `aria-label`, а `span` спрятан от дерева доступности: `separator` не берёт имя из своего содержимого. При `orientation="vertical"` игнорируется.

Имя	Тип	По умолчанию	Примечания
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`
label	`string`	—	Слова посреди линии — «или», «Личное», «Раньше». С подписью меняется сам элемент: `<hr>` пустой, положить слова некуда, поэтому подписанный вариант — это `<div role="separator">`, та же роль, что была у `<hr>` неявно. Слова несёт `aria-label`, а `span` спрятан от дерева доступности: `separator` не берёт имя из своего содержимого. При `orientation="vertical"` игнорируется.

Имя	Тип	По умолчанию	Примечания
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`
label	`string`	—	Слова посреди линии — «или», «Личное», «Раньше». С подписью меняется сам элемент: `<hr>` пустой, положить слова некуда, поэтому подписанный вариант — это `<div role="separator">`, та же роль, что была у `<hr>` неявно. Слова несёт `aria-label`, а `span` спрятан от дерева доступности: `separator` не берёт имя из своего содержимого. При `orientation="vertical"` игнорируется.

Имя	Тип	По умолчанию	Примечания
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`

Какие классы отдаёт

Все фреймворки отдают одни и те же классы — именно поэтому четыре библиотеки выглядят одинаково. Их можно использовать напрямую, вообще без библиотеки компонентов.

Класс	Роль	Примечания
.aura-divider	база	Обязательный. Без него модификатор не работает.
.aura-divider--vertical	модификатор
.aura-divider--labelled	модификатор
.aura-divider__label	элемент

Токены и правила

components.css

линия: 1px solid var(--border)
вертикальный: border-inline-start · align-self: stretch
с подписью: flex · ::before/::after lines · gap var(--space-3)
подпись: 600 12px var(--font) · var(--text-faint)