Progress State

import ProgressState from '@tdev-components/documents/ProgressState';

<ProgressState id="e383ca48-5a47-41ba-bb6c-8d241dcabdc5">

1. <TaskState id="c599706c-8422-453d-af02-c23e00686504" inline /> Hello
2. World **bla** __foo__
3. [Link](https://example.com)
4. `inline code!!`
    ```js
    console.log('code block');
    ```
</ProgressState>

http://localhost:3000

Optionen

Mit Bestätigung

Mit der Option confirm müssen die einzelnen Schritte bestätigt werden.

import ProgressState from '@tdev-components/documents/ProgressState';

<ProgressState id="baf83816-1621-403d-b075-309a46d12ab8" confirm>

1. Hello Bello and Bella
2. World **bla** __foo__
3. [Link](https://example.com)
4. `inline code!!`
    ```js
    console.log('code block');
    ```
</ProgressState>

http://localhost:3000

Bestätigung nach rechts öffnen

Mit float='right' fährt der Bestätigungs-Button nach Rechts aus. Praktisch, wenn links zu wenig Platz oder abdeckende Elemente vorhanden sind.

import ProgressState from '@tdev-components/documents/ProgressState';

<ProgressState id="baf83816-1621-403d-b075-309a46d12ab8" confirm float="right">

1. Hello Bello and Bella
2. World **bla** __foo__
3. [Link](https://example.com)
4. `inline code!!`
    ```js
    console.log('code block');
    ```
</ProgressState>

http://localhost:3000

Abgeschlossene Schritte geöffnet lassen

Mit der Option keepPreviousStepsOpen bleiben abgeschlossene Schritte geöffnet.

import ProgressState from '@tdev-components/documents/ProgressState';

<ProgressState id="9797be65-1025-438e-bc88-a4cc53e7e6e8" keepPreviousStepsOpen>

1. Hello Bello and Bella
2. World **bla** __foo__
3. [Link](https://example.com)
4. `inline code!!`
    ```js
    console.log('code block');
    ```
</ProgressState>

http://localhost:3000

Kein Zurücksetzen

Mit der Option preventSteppingBack kann der aktuelle Bearbeitungsstatus nicht auf einen früheren Zustand zurückgesetzt werden. In diesem Fall müssen alle Schritte bestätigt werden (also confirm ist automatisch gesetzt).

import ProgressState from '@tdev-components/documents/ProgressState';

<ProgressState id="4558828c-be84-46ec-90ee-737ec5da9595" preventSteppingBack>

1. Hello Bello and Bella
2. World **bla** __foo__
3. [Link](https://example.com)
4. `inline code!!`
    ```js
    console.log('code block');
    ```
</ProgressState>

http://localhost:3000

Nur den aktuellen Schritt anzeigen

Normalerweise können vergangene- oder künftige Schritte immer aufgeklappt werden. Falls dies jedoch nicht erwünscht ist, kann dies über preventTogglingPastSteps und preventTogglingFutureSteps unterbunden werden:

import ProgressState from '@tdev-components/documents/ProgressState';

<ProgressState id="831f561b-88c7-44f2-96f2-1dc34e88ceeb" preventTogglingPastSteps preventTogglingFutureSteps>

1. Hello Bello and Bella
2. World **bla** __foo__
3. [Link](https://example.com)
4. `inline code!!`
    ```js
    console.log('code block');
    ```
</ProgressState>

http://localhost:3000

Alle Schritte offen

Mit der Option allOpen werden immer alle Schritte angezeigt:

import ProgressState from '@tdev-components/documents/ProgressState';

<ProgressState id="dc9dcd21-803f-4ca7-bfce-8145db38d1e6" allOpen>

1. Hello Bello and Bella
2. World **bla** __foo__
3. [Link](https://example.com)
4. `inline code!!`
    ```js
    console.log('code block');
    ```
</ProgressState>

http://localhost:3000

Eigene Labels

Mit dem Attribut labels können eigene Labels für die Schritte angegeben werden.:

import ProgressState from '@tdev-components/documents/ProgressState';
import { mdiBellRingOutline } from '@mdi/js';
import Icon from '@mdi/react';

<ProgressState 
    id="aef16ce0-8914-4d1d-9c3b-efe9eaf5846c" 
    labels={[
        'S1', 
        <Icon path={mdiBellRingOutline} size={1} color='var(--ifm-color-warning)' />,
        'S3', 
        'S4'
    ]}
>

1. Hello Bello and Bella
2. World **bla** __foo__
3. [Link](https://example.com)
4. `inline code!!`
    ```js
    console.log('code block');
    ```
</ProgressState>

http://localhost:3000