Лэйаут

Stack

Флекс-контейнер, по умолчанию вертикальный. Рабочая лошадка: большинство лэйаутов в Aura — это Stack из Group-ов.

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

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

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

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

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

First

Second

Third

First

Second

Third

First

Second

Third

First

Second

Third

First

Second

Third

Код

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-3);width:100%;">
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">First</p>
  </div>
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">Second</p>
  </div>
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">Third</p>
  </div>
</div>

Demo.tsx

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

export default function Demo() {
  return (
    <Stack gap={3} style={{ width: '100%' }}>
      {['First', 'Second', 'Third'].map((label) => (
        <Card key={label}>
          <Typography variant="body">{label}</Typography>
        </Card>
      ))}
    </Stack>
  );
}

Demo.vue

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

<template>
  <Stack :gap="3">
    <div>One</div>
    <div>Two</div>
  </Stack>
</template>

Demo.svelte

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

<Stack gap={3}>
  <div>One</div>
  <div>Two</div>
</Stack>

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

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraStack],
  template: `
    <div auraStack [gap]="3">
      <div>One</div>
      <div>Two</div>
    </div>
  `,
})
export class DemoComponent {}

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

Пропсы

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

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

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

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

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

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

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

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

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

components.css

направление: var(--aura-dir, column)
гэп: var(--aura-gap, var(--space-4))
align: var(--aura-align, stretch)
justify: var(--aura-justify, flex-start)
wrap: var(--aura-wrap, nowrap)