Antworten

Um Antworten einzuholen, kann die überall verfügbare Komponente Answer verwendet werden (sie muss nicht importiert werden). Abhängig vom übergebenen Typ wird die Antwort in einer anderen Form dargestellt.

string

<String /> Komponente 👉 String

Einzeilige Antwort

das String-Attribute type wird über <Answer inputType="..." /> definiert

text

<QuillV2 /> Komponente 👉 QuillV2

Mehrzeilige Antwort mit WYSIWYG-Editor

optionaler Typ: quill_v2

state

<TaskState /> Komponente 👉 TaskState

Zustandsauswahl

optionaler Typ: task_state

progress

<ProgressState /> Komponente 👉 ProgressState

Fortschrittsauswahl

optionaler Typ: progress_state

<Answer type="state" label="Fertig?" id="5404e731-fd66-42d9-9f61-0299df6a032b" />
<Answer type="string" id="259a2608-ee20-4f76-b558-09bf9871c235" />
<Answer type="text" id="c85a2c52-cdce-42ad-82c9-9924b3a9fa61" />
<Answer type="progress" id="f880f36c-bdc0-4070-b4a8-bd092dbc3343">

1. Wer bist du?
2. Was machst du?
3. Wieso bist du da?
</Answer>

http://localhost:3000

Fertig?

Laden...

Laden...

Installation

Code

• src/components/Answer

src/theme/MDXComponents.tsx

import Answer from '@tdev-components/Answer';

src/theme/MDXComponents.tsx

import MDXComponents from '@theme-original/MDXComponents';
import Answer from '@tdev-components/Answer';

export default {
  // Re-use the default mapping
  ...MDXComponents,
    Answer: Answer,
};

Voraussetzung

Damit auch TaskStates, die von einer <Answer /> Komponente dargestellt werden, in die Seitenübersicht aufgenommen werden, braucht es das Plugin remark-enumerate-components

• 👉 remark-enumerate-components

mit der Konfiguration

docusaurus.config.ts

import enumerateAnswersPlugin from './src/plugins/remark-enumerate-components/plugin';

const REMARK_PLUGINS = [
    /* ... */
    [
      [
        enumerateAnswersPlugin,
        {
          componentsToEnumerate: ['Answer', /*...*/],
        }
      ]
    ]
];