Примитивы

Alert

Сообщение, требующее внимания. По умолчанию вежливое: role="alert" заставляет скринридер прервать чтение — это верно для только что появившегося сообщения и неверно для того, что было на странице всегда. urgent — только для первого случая. Тон — это цвет и сила подложки, читаемые через --aura-alert-color и --aura-alert-tint, поэтому .aura-alert--brand { --aura-alert-color: var(--brand) } — шестой тон без форка стилей.

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

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

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

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

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

Budget at 80%

Three days left in the cycle.

Build failed

aura-svelte — 2 minutes ago

Tokens rebuilt.

Budget at 80%

Three days left in the cycle.

Build failed

aura-svelte — 2 minutes ago

Tokens rebuilt.

Budget at 80%

Three days left in the cycle.

Build failed

aura-svelte — 2 minutes ago

Tokens rebuilt.

Budget at 80%

Three days left in the cycle.

Build failed

aura-svelte — 2 minutes ago

Tokens rebuilt.

Budget at 80%

Three days left in the cycle.

Build failed

aura-svelte — 2 minutes ago

Tokens rebuilt.

Код

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-3)">
  <div role="status" class="aura-alert aura-alert--warning">
    <div class="aura-alert__body"><div class="aura-alert__title">Budget at 80%</div>Three days left in the cycle.</div>
  </div>
  <div role="status" class="aura-alert aura-alert--danger">
    <div class="aura-alert__body"><div class="aura-alert__title">Build failed</div>aura-svelte — 2 minutes ago</div>
  </div>
  <div role="status" class="aura-alert">
    <div class="aura-alert__body">Tokens rebuilt.</div>
  </div>
</div>

Demo.tsx

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

export default function Demo() {
  return (
    <Stack gap={3}>
      <Alert title="Budget at 80%" tone="warning">Three days left in the cycle.</Alert>
      <Alert tone="danger" title="Build failed">aura-svelte — 2 minutes ago</Alert>
      <Alert>Tokens rebuilt.</Alert>
    </Stack>
  );
}

Demo.vue

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

<template>
  <Alert tone="warning" title="Budget at 80%">Three days left in the cycle.</Alert>
</template>

Demo.svelte

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

<Alert tone="warning" title="Budget at 80%">Three days left in the cycle.</Alert>

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

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraAlert],
  template: `<aura-alert tone="warning" title="Budget at 80%">Three days left in the cycle.</aura-alert>`,
})
export class DemoComponent {}

Пропсы

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

Имя	Тип	По умолчанию	Примечания
tone	`BadgeTone`	`'info'`
title	`string`	—
urgent	`boolean`	`false`	Меняет `role="status"` на `role="alert"`. Только для сообщения, появляющегося в ответ на действие.
withCloseButton	`boolean`	`false`
closeLabel	`string`	`'Dismiss'`
onClose	`() => void`	—
icon	`ReactNode`	—

Имя	Тип	По умолчанию
tone	`BadgeTone`	`'info'`
title	`string`	—
urgent	`boolean`	`false`
withCloseButton	`boolean`	`false`
closeLabel	`string`	`'Dismiss'`
closeсобытие	`() => void`	—
iconслот	`slot`	—

Имя	Тип	По умолчанию
tone	`BadgeTone`	`'info'`
title	`string`	—
urgent	`boolean`	`false`
withCloseButton	`boolean`	`false`
closeLabel	`string`	`'Dismiss'`
onclose	`() => void`	—
iconслот	`Snippet`	—

Имя	Тип	По умолчанию	Примечания
tone	`BadgeTone`	`'info'`
title	`string`	—
icon	`TemplateRef<unknown>`	—	React принимает узел, Vue — слот, Svelte — сниппет; в этом пакете то же самое называется шаблоном. Своего набора иконок у Aura нет, поэтому сюда идёт разметка, а не имя.
urgent	`boolean`	`false`
withCloseButton	`boolean`	`false`
closeLabel	`string`	`'Dismiss'`
closeсобытие	`EventEmitter<void>`	—

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

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

Класс	Роль	Примечания
.aura-alert	база	Обязательный. Без него модификатор не работает.
.aura-alert--<tone>	модификатор
.aura-alert__title	элемент
.aura-alert__body	элемент

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

components.css

линия: 3px solid var(--aura-alert-color, var(--info))
подложка: color-mix(var(--aura-alert-color) var(--aura-alert-tint, 8%))
тон по умолчанию: info — a note, not a brand moment