> ProgressBar

ProgressBar

Barre de progression

TagsuiExemples6StylesDisponibles

Determinate

export const Determinate = () => <ProgressBar mode="determinate" value={0.25} />;

Loop

export const Loop = () => <ProgressBar mode="loop" />;

Indeterminate

export const Indeterminate = () => <ProgressBar mode="indeterminate" />;

WithIndicator

25.000%

export const WithIndicator = () => <ProgressBar mode="determinate" indicator value={0.25} />;

NoRadius

export const NoRadius = () => <ProgressBar mode="determinate" noRadius value={0.25} />;

Usage

export const Usage = () => {
  const [value, setValue] = React.useState(0.25);
  return (
    <Box>
      <ProgressBar value={value} />
      <Box mt={'2W'} width={150}>
        <Button
          title={value < 1 ? 'Augmenter' : 'Réduire'}
          variant="secondary"
          onPress={() => {
            if (value < 1) setValue(v => v + 0.25);
            else setValue(v => v - 0.25);
          }}
        />
      </Box>
    </Box>
  );
};

Alveole UI Kit — v1.8.4