Лэйаут

Container

Центрированная колонка страницы с максимальной шириной и боковыми отступами.

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

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

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

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

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

Centred, and never wider than 420px.

Код

index.html

<div class="demo-bounds">
  <div class="aura-container" style="--aura-max:420px;--aura-pad:var(--space-4);background:var(--surface-2);border-radius:var(--r2);">
    <div class="aura-card">
      <p class="aura-text aura-text--body" style="">Centred, and never wider than 420px.</p>
    </div>
  </div>
</div>

Demo.tsx

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

// Пунктирная рамка — та ширина, которую контейнеру дали; тонированная колонка — та, что он берёт.
// Пока не с чем сравнить, максимальной ширине нечего показать.
export default function Demo() {
  return (
    <div className="demo-bounds">
      <Container maxWidth="420px" padInline={4} style={{ background: 'var(--surface-2)', borderRadius: 'var(--r2)' }}>
        <Card>
          <Typography variant="body">Centred, and never wider than 420px.</Typography>
        </Card>
      </Container>
    </div>
  );
}

Demo.vue

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

<template>
  <Container max-width="1120px" :pad-inline="5">
    <slot />
  </Container>
</template>

Demo.svelte

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

<Container maxWidth="1120px" padInline={5}>
  {@render children?.()}
</Container>

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

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraContainer],
  template: `
    <div auraContainer maxWidth="1120px" [padInline]="5">
      <ng-content />
    </div>
  `,
})
export class DemoComponent {}

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

Пропсы

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

Имя	Тип	По умолчанию	Примечания
as	`ElementType`	`'div'`	Какой элемент рендерить.
maxWidth	`string`	—	Любая CSS-длина, например `1120px`.
padInline	`number \| string`	—	Шаг шкалы отступов или произвольная CSS-длина.

Имя	Тип	По умолчанию	Примечания
as	`string`	`'div'`	Какой элемент рендерить.
maxWidth	`string`	—	Любая CSS-длина, например `1120px`.
padInline	`number \| string`	—	Шаг шкалы отступов или произвольная CSS-длина.

Имя	Тип	По умолчанию	Примечания
as	`string`	`'div'`	Какой элемент рендерить.
maxWidth	`string`	—	Любая CSS-длина, например `1120px`.
padInline	`number \| string`	—	Шаг шкалы отступов или произвольная CSS-длина.

Имя	Тип	По умолчанию	Примечания
maxWidth	`string`	—	Любая CSS-длина, например `1120px`.
padInline	`number \| string`	—	Шаг шкалы отступов или произвольная CSS-длина.

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

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

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

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

components.css

макс. ширина: var(--aura-max, 1120px)
паддинг: var(--aura-pad, var(--space-4))
центрирование: margin-inline: auto