Лэйаут

Group

Строка, которая переносится. Для списков тегов, рядов кнопок — всего, что должно перетекать, а не вылезать за край.

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

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

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

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

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

design-system tokens react vue svelte angular css a11y monorepo

design-systemtokensreactvuesvelteangularcssa11ymonorepo

design-system tokens react vue svelte angular css a11y monorepo

design-systemtokensreactvuesvelteangularcssa11ymonorepo

Код

index.html

<div class="aura-group" style="--aura-gap:var(--space-3);">
  <span class="aura-chip">design-system</span>
  <span class="aura-chip">tokens</span>
  <span class="aura-chip">react</span>
  <span class="aura-chip">vue</span>
  <span class="aura-chip">svelte</span>
  <span class="aura-chip">angular</span>
  <span class="aura-chip">css</span>
  <span class="aura-chip">a11y</span>
  <span class="aura-chip">monorepo</span>
</div>

Demo.tsx

import { Chip, Group } from '@ilomee/aura-react';

const TAGS = ['design-system', 'tokens', 'react', 'vue', 'svelte', 'angular', 'css', 'a11y', 'monorepo'];

export default function Demo() {
  // Group переносит содержимое на новую строку, а не выпускает его за край — измените ширину
  // страницы и посмотрите.
  return (
    <Group>
      {TAGS.map((tag) => (
        <Chip key={tag}>{tag}</Chip>
      ))}
    </Group>
  );
}

Demo.vue

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

<template>
  <Group>
    <Chip v-for="tag in tags" :key="tag">{{ tag }}</Chip>
  </Group>
</template>

Demo.svelte

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

<Group>
  {#each tags as tag}
    <Chip>{tag}</Chip>
  {/each}
</Group>

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

demo.component.ts

import { AuraGroup, AuraChip } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraGroup, AuraChip],
  template: `
    <div auraGroup>
      @for (tag of tags; track tag) {
        <aura-chip>{{ tag }}</aura-chip>
      }
    </div>
  `,
})
export class DemoComponent {
  tags = ['ai', 'design', 'css'];
}

Это директива — элемент выбираете вы, поэтому входа as нет.

Пропсы

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

Имя	Тип	По умолчанию	Примечания
as	`ElementType`	`'div'`	Какой элемент рендерить.
gap	`number \| string`	`3`	Шаг шкалы отступов (`4` → `var(--space-4)`) или произвольная CSS-длина.
align	`string`	—

Имя	Тип	По умолчанию	Примечания
as	`string`	`'div'`	Какой элемент рендерить.
gap	`number \| string`	`3`	Шаг шкалы отступов (`4` → `var(--space-4)`) или произвольная CSS-длина.
align	`string`	—

Имя	Тип	По умолчанию	Примечания
as	`string`	`'div'`	Какой элемент рендерить.
gap	`number \| string`	`3`	Шаг шкалы отступов (`4` → `var(--space-4)`) или произвольная CSS-длина.
align	`string`	—

Имя	Тип	По умолчанию	Примечания
gap	`number \| string`	`3`	Шаг шкалы отступов (`4` → `var(--space-4)`) или произвольная CSS-длина.
align	`string`	—

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

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

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

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

components.css

гэп: var(--aura-gap, var(--space-3))
align: var(--aura-align, center)
wrap: всегда — в этом весь смысл