Einführung

Eine Komponente, die den Fortschritt der Abgeschlossenheit einer Operation als lineare Leiste oder kreisförmigen Indikator anzeigt.

Verwendung

Linearer Fortschritt

import { Progress } from "../components/ui";

export default function MyPage() {
  return <Progress value={72} showValueText />;
}

Zirkulärer Fortschritt

import { Progress } from "../components/ui";

export default function MyPage() {
  return <Progress type="circular" value={40} showValueText />;
}

CMS-Seitenbauer

Diese Komponente ist als progress-Block im Seitenbauer (content/pages/*.json) verfügbar:

{
  "type": "progress",
  "value": 72,
  "showValueText": true
}

Eigenschaften

Progress

Eigenschaft	Typ	Beschreibung

| value | `number \ | null` | Der aktuelle Wert. |

| min | number | Der Mindestwert. Standard: 0. | | max | number | Der Höchstwert. Standard: 100. | | label | Child | Über dem Indikator anzuzeigende Beschriftung. | | showValueText | boolean | Legt fest, ob der Wertetext angezeigt wird. Standard: false. | | valueText | Child | Benutzerdefinierter anzuzeigender Wertetext. |

| type | `"linear" \ | "circular"` | Der visuelle Stil des Fortschritts. Standard: "linear". | | variant | `"solid" \ | "subtle"` | Die visuelle Variante. |

| shape | `"square" \ | "rounded" \ | "full"` | Die Form des Indikators. |

| striped | boolean | Legt fest, ob eine gestreifte Füllung angezeigt wird (linear). | | animated | boolean | Legt fest, ob die Füllung animiert wird. |

| size | `"xs" \ | "sm" \ | "md" \ | "lg" \ | "xl"` | Die Größe des Indikators. |

| class | string | Benutzerdefinierte CSS-Klassen für das Wurzelelement. |

Unterkomponenten

Progress.Root, Progress.Track, Progress.Range, Progress.Circle, Progress.CircleTrack, Progress.CircleRange, Progress.Label, Progress.ValueText, Progress.View