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

    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

      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
                CC 4.0