Примитивы

Progress

Полоса с известным прогрессом. Число указывается один раз и отрисовывается дважды из одного источника: элемент несёт --aura-value, стили превращают его в ширину, а aria-valuenow сообщает то же самое. Значения зажимаются: полоса за собственный край — баг, который вызывающий не должен увидеть.

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

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

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

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

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

Код

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-3);min-width:320px;">
  <div role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload" class="aura-progress">
    <div class="aura-progress__fill" style="--aura-value:64"></div>
  </div>
  <div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Overshoot, clamped to 100" class="aura-progress">
    <div class="aura-progress__fill" style="--aura-value:100"></div>
  </div>
</div>

Demo.tsx

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

/**
 * `minWidth` — так же, как в демо Field и Select. Полоса имеет `width: 100%`, а панель превью —
 * flex-строка, сжимающаяся по содержимому: процент от родителя, у которого своей ширины нет,
 * разрешается в ничто, поэтому демо рисовало две полосы шириной 0px и выглядело пустой сценой. На
 * странице всегда есть что заполнять, превью это нужно задать.
 */
export default function Demo() {
  return (
    <Stack gap={3} style={{ minWidth: 320 }}>
      <Progress value={64} label="Upload" />
      {/* Значение зажимается: полоса не рисуется за собственный край. */}
      <Progress value={140} label="Overshoot, clamped to 100" />
    </Stack>
  );
}

Demo.vue

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

<template>
  <Progress :value="64" label="Upload" />
</template>

Demo.svelte

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

<Progress value={64} label="Upload" />

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

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraProgress],
  template: `<aura-progress [value]="64" label="Upload" />`,
})
export class DemoComponent {}

Пропсы

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

Имя	Тип	По умолчанию	Примечания
value	`number`	`0`	0–100, зажимается.
label	`string`	—

Имя	Тип	По умолчанию	Примечания
value	`number`	`0`
label	`string`	—

Имя	Тип	По умолчанию	Примечания
value	`number`	`0`
label	`string`	—

Имя	Тип	По умолчанию	Примечания
value	`number`	`0`
label	`string`	—

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

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

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

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

components.css

высота: var(--progress-h)
дорожка: var(--surface-3)
заливка: var(--gradient) · width: calc(var(--aura-value) * 1%)