Progress

composant

The progress of a task, on the native progress element: a value between zero and the maximum, or none while the end is unknown.

Aperçu

Clair

Code

<twig:Progress :value="64" aria-label="Upload of the photos" />

Sombre

Code

<twig:Progress :value="64" aria-label="Upload of the photos" />

Installation

php bin/console ux:install progress --kit=github.com/parler-haut-interagir-librement/ux-kit

Propriétés

Propriété	Type	Par défaut	Description
`value`	`int\|float\|null`	`null`	The progress, between 0 and the maximum; null while it is unknown.
`max`	`int\|float`	`100`	The value of a finished task.

Accessibility

The browser announces the value as a percentage, and a bar without a value as busy. Name it with aria-label or a Label. phil-ux stills the moving bar under prefers-reduced-motion.

Fichiers à copier

templates/components/Progress.html.twig

{#-
 # The native progress bar: a value kept between zero and the maximum, or none for a task whose end is unknown, which
 # the browser announces as busy.
 #}
{%- props
    ## int|float|null The progress, between 0 and the maximum; null while it is unknown.
    value = null,
    ## int|float The value of a finished task.
    max = 100
-%}
{%- set _max = max > 0 ? max : 100 -%}
<progress data-slot="progress" max="{{ _max }}"{% if value is not null %} value="{{ max(0, min(_max, value)) }}"{% endif %}{{ attributes }}></progress>