Лэйаут

Flex

Флекс-контейнер, по умолчанию горизонтальный. Ручки те же, что у Stack, но direction принимает любое значение CSS flex-direction.

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

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

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

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

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

Billing

Код

index.html

<div class="aura-card" style="width:100%;">
  <div class="aura-flex" style="--aura-dir:row;--aura-gap:var(--space-4);--aura-align:center;--aura-justify:space-between;">
    <h3 class="aura-text aura-text--h3" style="">Billing</h3>
    <button type="button" class="aura-btn aura-btn--primary">Upgrade</button>
  </div>
</div>

Demo.tsx

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

export default function Demo() {
  return (
    <Card style={{ width: '100%' }}>
      <Flex justify="space-between" align="center">
        <Typography variant="h3">Billing</Typography>
        <Button variant="primary">Upgrade</Button>
      </Flex>
    </Card>
  );
}

Demo.vue

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

<template>
  <Flex justify="space-between" align="center">
    <span>Title</span>
    <button>Action</button>
  </Flex>
</template>

Demo.svelte

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

<Flex justify="space-between" align="center">
  <span>Title</span>
  <button>Action</button>
</Flex>

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

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraFlex],
  template: `
    <div auraFlex justify="space-between" align="center">
      <span>Title</span>
      <button>Action</button>
    </div>
  `,
})
export class DemoComponent {}

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

Пропсы

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

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

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

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

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

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

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

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

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

components.css

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