Примитивы

Skeleton

Заглушка для ещё не пришедшего контента. Всегда aria-hidden: читать «loading» по разу на каждую заглушку хуже тишины — aria-busy вешайте на ожидающий регион, у него есть имя.

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

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

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

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

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

Код

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-3)" aria-busy="true">
  <span aria-hidden="true" class="aura-skeleton aura-skeleton--circle" style="width:40px;height:40px"></span>
  <span aria-hidden="true" class="aura-skeleton aura-skeleton--text aura-anim-shimmer" style="width:220px"></span>
  <span aria-hidden="true" class="aura-skeleton aura-skeleton--text aura-anim-shimmer" style="width:160px"></span>
</div>

Demo.tsx

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

export default function Demo() {
  // aria-busy вешается на ожидающий регион — сами заглушки скрыты от скринридера.
  return (
    <Stack gap={3} aria-busy="true">
      <Skeleton variant="circle" width="40px" height="40px" />
      <Skeleton variant="text" width="220px" animated />
      <Skeleton variant="text" width="160px" animated />
    </Stack>
  );
}

Demo.vue

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

<template>
  <Skeleton variant="text" width="180px" animated />
</template>

Demo.svelte

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

<Skeleton variant="text" width="180px" animated />

Используется как aura-skeleton.

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraSkeleton],
  template: `<aura-skeleton variant="text" width="180px" [animated]="true" />`,
})
export class DemoComponent {}

Пропсы

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

Имя	Тип	По умолчанию
variant	`'block' \| 'text' \| 'circle'`	`'block'`
width	`string`	—
height	`string`	—
animated	`boolean`	`false`

Имя	Тип	По умолчанию
variant	`'block' \| 'text' \| 'circle'`	`'block'`
width	`string`	—
height	`string`	—
animated	`boolean`	`false`

Имя	Тип	По умолчанию
variant	`'block' \| 'text' \| 'circle'`	`'block'`
width	`string`	—
height	`string`	—
animated	`boolean`	`false`

Имя	Тип	По умолчанию
variant	`'block' \| 'text' \| 'circle'`	`'block'`
width	`string`	—
height	`string`	—
animated	`boolean`	`false`

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

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

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

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

components.css

заливка: var(--surface-2)
скругление: var(--skeleton-radius)
мерцание: .aura-anim-shimmer — opt-in, needs animations.css