Лэйаут

Masonry

Кладка в колонки. Сейчас работает на CSS-колонках и сама переключается на нативный grid-masonry через @supports там, где браузер его умеет.

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

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

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

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

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

90px

140px

70px

120px

100px

60px

90px

140px

70px

120px

100px

60px

90px

140px

70px

120px

100px

60px

90px

140px

70px

120px

100px

60px

90px

140px

70px

120px

100px

60px

Код

index.html

<div class="aura-masonry" style="--aura-gap:var(--space-4);--cols-base:2;--cols-md:3;width:100%;">
  <div class="aura-card" style="height:90px;margin-bottom:var(--space-4);">
    <span class="aura-text aura-text--caption aura-text--muted" style="">90px</span>
  </div>
  <div class="aura-card" style="height:140px;margin-bottom:var(--space-4);">
    <span class="aura-text aura-text--caption aura-text--muted" style="">140px</span>
  </div>
  <div class="aura-card" style="height:70px;margin-bottom:var(--space-4);">
    <span class="aura-text aura-text--caption aura-text--muted" style="">70px</span>
  </div>
  <div class="aura-card" style="height:120px;margin-bottom:var(--space-4);">
    <span class="aura-text aura-text--caption aura-text--muted" style="">120px</span>
  </div>
  <div class="aura-card" style="height:100px;margin-bottom:var(--space-4);">
    <span class="aura-text aura-text--caption aura-text--muted" style="">100px</span>
  </div>
  <div class="aura-card" style="height:60px;margin-bottom:var(--space-4);">
    <span class="aura-text aura-text--caption aura-text--muted" style="">60px</span>
  </div>
</div>

Demo.tsx

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

const HEIGHTS = [90, 140, 70, 120, 100, 60];

export default function Demo() {
  return (
    <Masonry cols={{ base: 2, md: 3 }} style={{ width: '100%' }}>
      {HEIGHTS.map((height, i) => (
        <Card key={i} style={{ height, marginBottom: 'var(--space-4)' }}>
          <Typography variant="caption" tone="muted">
            {height}px
          </Typography>
        </Card>
      ))}
    </Masonry>
  );
}

Demo.vue

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

<template>
  <Masonry :cols="{ base: 1, md: 2, lg: 3 }">
    <Card v-for="note in notes" :key="note.id">{{ note.body }}</Card>
  </Masonry>
</template>

Demo.svelte

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

<Masonry cols={{ base: 1, md: 2, lg: 3 }}>
  {#each notes as note (note.id)}
    <Card>{note.body}</Card>
  {/each}
</Masonry>

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

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraMasonry, AuraCard],
  template: `
    <div auraMasonry [cols]="{ base: 1, md: 2, lg: 3 }">
      @for (note of notes; track note.id) {
        <div auraCard>{{ note.body }}</div>
      }
    </div>
  `,
})
export class DemoComponent {
  notes = [];
}

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

Пропсы

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

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

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

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

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

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

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

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

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

components.css

гэп: var(--aura-gap)
фолбэк: column-count
современный: grid-template-rows: masonry, где поддерживается