Лэйаут

Grid

CSS-грид в двух режимах: фиксированное или адаптивное число колонок, либо авто-подгонка через minItemWidth. Брейкпоинты считаются чистым CSS — никакого JS с медиазапросами.

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

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

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

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

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

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1

Cell 2

Cell 3

Cell 4

Код

index.html

<div class="aura-grid" style="--aura-gap:var(--space-4);--cols-base:1;--cols-md:2;--cols-lg:4;width:100%;">
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">Cell 1</p>
  </div>
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">Cell 2</p>
  </div>
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">Cell 3</p>
  </div>
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">Cell 4</p>
  </div>
</div>

Demo.tsx

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

export default function Demo() {
  // Брейкпоинты разрешаются чистым CSS — никакого JavaScript с медиа-запросами.
  return (
    <Grid cols={{ base: 1, md: 2, lg: 4 }} style={{ width: '100%' }}>
      {Array.from({ length: 4 }, (_, i) => (
        <Card key={i}>
          <Typography variant="body">Cell {i + 1}</Typography>
        </Card>
      ))}
    </Grid>
  );
}

Demo.vue

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

<template>
  <Grid :cols="{ base: 1, md: 2, lg: 3 }">
    <Card v-for="item in items" :key="item.id">{{ item.name }}</Card>
  </Grid>
</template>

Demo.svelte

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

<Grid cols={{ base: 1, md: 2, lg: 3 }}>
  {#each items as item (item.id)}
    <Card>{item.name}</Card>
  {/each}
</Grid>

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

demo.component.ts

import { AuraGrid, AuraCard } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraGrid, AuraCard],
  template: `
    <div auraGrid [cols]="{ base: 1, md: 2, lg: 3 }">
      @for (item of items; track item.id) {
        <div auraCard>{{ item.name }}</div>
      }
    </div>
  `,
})
export class DemoComponent {
  items = [];
}

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

Пропсы

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

Имя	Тип	По умолчанию	Примечания
as	`ElementType`	`'div'`	Какой элемент рендерить.
cols	`number \| { base?: number; md?: number; lg?: number }`	—	Фиксированное число колонок или своё на каждый брейкпоинт.
gap	`number \| string`	`4`	Шаг шкалы отступов (`4` → `var(--space-4)`) или произвольная CSS-длина.
minItemWidth	`string`	—	Режим авто-подгонки: колонки не уже этой ширины. Перебивает `cols`.

Имя	Тип	По умолчанию	Примечания
as	`string`	`'div'`	Какой элемент рендерить.
cols	`number \| { base?: number; md?: number; lg?: number }`	—	Фиксированное число колонок или своё на каждый брейкпоинт.
gap	`number \| string`	`4`	Шаг шкалы отступов (`4` → `var(--space-4)`) или произвольная CSS-длина.
minItemWidth	`string`	—	Режим авто-подгонки: колонки не уже этой ширины. Перебивает `cols`.

Имя	Тип	По умолчанию	Примечания
as	`string`	`'div'`	Какой элемент рендерить.
cols	`number \| { base?: number; md?: number; lg?: number }`	—	Фиксированное число колонок или своё на каждый брейкпоинт.
gap	`number \| string`	`4`	Шаг шкалы отступов (`4` → `var(--space-4)`) или произвольная CSS-длина.
minItemWidth	`string`	—	Режим авто-подгонки: колонки не уже этой ширины. Перебивает `cols`.

Имя	Тип	По умолчанию	Примечания
cols	`number \| { base?: number; md?: number; lg?: number }`	—	Фиксированное число колонок или своё на каждый брейкпоинт.
gap	`number \| string`	`4`	Шаг шкалы отступов (`4` → `var(--space-4)`) или произвольная CSS-длина.
minItemWidth	`string`	—	Режим авто-подгонки: колонки не уже этой ширины. Перебивает `cols`.

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

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

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

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

components.css

колонки: var(--cols-base) · var(--cols-md) · var(--cols-lg)
гэп: var(--aura-gap, var(--space-4))
--auto: repeat(auto-fit, minmax(var(--aura-min, 240px), 1fr))
брейкпоинты: 768px · 1024px