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

      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 Schritt 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