Примитивы

RingProgress

Детерминированное кольцо — та же роль progressbar, что у Progress, но нарисованная одним conic-gradient, без SVG. label даёт ему имя, а дети заполняют середину: кольцо с надписью «70%» всё ещё обязано сказать, чего именно 70%.

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

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

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

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

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

70%

Код

index.html

<div
  class="aura-ring"
  role="progressbar"
  aria-valuenow="70"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Storage used"
  style="--aura-ring:70"
>
  <span class="aura-ring__label">70%</span>
</div>

Demo.tsx

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

/**
 * Повторяет html-сниппет `ring-progress` из реестра: именно с ним сравнивают все стеки.
 */
export default function Demo() {
  return (
    <RingProgress value={70} label="Storage used">
      70%
    </RingProgress>
  );
}

Demo.vue

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

<template>
  <RingProgress :value="70" label="Storage used">70%</RingProgress>
</template>

Demo.svelte

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

<RingProgress value={70} label="Storage used">70%</RingProgress>

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

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraRingProgress],
  template: `<aura-ring-progress [value]="70" label="Storage used">70%</aura-ring-progress>`,
})
export class DemoComponent {}

Пропсы

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

Имя	Тип	По умолчанию	Примечания
value	`number`	`0`	0–100. Кламп: кольцо за собственным концом — баг, который не должен доходить до вызывающего.
label	`string`	—	Имя кольца для скринридера. Это не видимый текст в центре — тот приходит через `children`.
childrenслот	`ReactNode`	—	Содержимое центра. Спан рендерится даже пустым, чтобы все четыре стека давали одинаковый DOM: Angular не умеет определить пустую проекцию.

Имя	Тип	По умолчанию
value	`number`	`0`
label	`string`	—
defaultслот	`slot`	—

Имя	Тип	По умолчанию
value	`number`	`0`
label	`string`	—
childrenслот	`Snippet`	—

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

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

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

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

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

components.css

дуга: conic-gradient(var(--accent) calc(var(--aura-ring) * 1%), var(--surface-3) 0)
размер: var(--avatar-lg)
толщина: var(--ring-thickness) — the middle is punched out by ::before
анимация: @property --aura-ring — without it the angle jumps instead of animating