Примитивы

Indicator

Точка в углу чего-либо — непрочитано, онлайн, требует внимания. Обёртка задаёт только контекст позиционирования и не трогает раскладку того, что оборачивает. Если внутри число, точка вырастает в «пилюлю», а не обрезает его.

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

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

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

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

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

Код

index.html

<span class="aura-indicator">
  <button type="button" class="aura-btn aura-btn--ghost" aria-label="Notifications">
    <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 2a4 4 0 0 0-4 4v3l-1 2h10l-1-2V6a4 4 0 0 0-4-4z" fill="currentColor"></path></svg>
  </button>
  <span class="aura-indicator__dot" role="status" aria-label="3 unread"></span>
</span>
<span class="aura-indicator">
  <button type="button" class="aura-btn aura-btn--ghost" aria-label="Notifications">
    <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 2a4 4 0 0 0-4 4v3l-1 2h10l-1-2V6a4 4 0 0 0-4-4z" fill="currentColor"></path></svg>
  </button>
  <span class="aura-indicator__dot aura-indicator__dot--count" role="status" aria-label="11 unread">11</span>
</span>

Demo.tsx

import { Indicator } from '@ilomee/aura-react';

/**
 * Повторяет html-сниппет `indicator` из реестра: именно с ним сравнивают все стеки, поэтому демо
 * обязано быть той же разметкой, а не просто хорошей иллюстрацией.
 */
function Bell() {
  return (
    <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
      <path d="M8 2a4 4 0 0 0-4 4v3l-1 2h10l-1-2V6a4 4 0 0 0-4-4z" fill="currentColor" />
    </svg>
  );
}

export default function Demo() {
  return (
    <>
      <Indicator label="3 unread">
        <button type="button" className="aura-btn aura-btn--ghost" aria-label="Notifications">
          <Bell />
        </button>
      </Indicator>
      <Indicator count={11} label="11 unread">
        <button type="button" className="aura-btn aura-btn--ghost" aria-label="Notifications">
          <Bell />
        </button>
      </Indicator>
    </>
  );
}

Demo.vue

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

<template>
  <Indicator :count="11" label="11 unread">
    <BellIcon />
  </Indicator>
</template>

Demo.svelte

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

<Indicator count={11} label="11 unread">
  <BellIcon />
</Indicator>

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

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraIndicator],
  template: `<aura-indicator [count]="11" label="11 unread">
    <svg>…</svg>
  </aura-indicator>`,
})
export class DemoComponent {}

Пропсы

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

Имя	Тип	По умолчанию	Примечания
count	`number`	—	Число внутри точки. Без него точка остаётся точкой; `0` — это число, а не отсутствие.
hidden	`boolean`	`false`	Прячет точку, не размонтируя то, к чему она приколота.
label	`string`	—	Даёт точке имя. Без него точка молчит: цветная точка сама по себе ничего не значит для скринридера, а `role="status"` без имени зачитывает пустую строку.
childrenслот	`ReactNode`	—	То, к чему приколота точка.

Имя	Тип	По умолчанию
count	`number`	—
hidden	`boolean`	`false`
label	`string`	—
defaultслот	`slot`	—

Имя	Тип	По умолчанию
count	`number`	—
hidden	`boolean`	`false`
label	`string`	—
childrenслот	`Snippet`	—

Имя	Тип	По умолчанию
count	`number`	—
hidden	`boolean`	`false`
label	`string`	—
ng-contentслот	`content`	—

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

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

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

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

components.css

размер: var(--indicator-size) — min-width matches, so a bare dot stays round
заливка: var(--danger)
отбивка: box-shadow: 0 0 0 2px var(--canvas) — same trick as the avatar ring