Zum Hauptinhalt springen

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
  1. Schritt 1
    Hello

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="2991a75f-8adb-448a-9b59-68fc8ec2ff62" 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
  1. Schritt 1
    Hello Bello and Bella

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="2991a75f-8adb-448a-9b59-68fc8ec2ff62" 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
  1. Schritt 1
    Hello Bello and Bella

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
  1. Schritt 1
    Hello Bello and Bella

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
  1. Schritt 1
    Hello Bello and Bella

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
  1. Schritt 1
    Hello Bello and Bella

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
  1. Schritt 1
    Hello Bello and Bella

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
  1. S1
    Hello Bello and Bella