Brickslab.Toolsv2.1.1

@brickslab./ui-webQuiz

Previous/Next navigation bar with optional summary panel and jump-to support.

Basic

With summary panel

Disabled states

Props

PropTypeDéfautRequisDescription
canNextbooleantrue—Enables the Next button.
canPrevbooleantrue—Enables the Previous button.
onNext() => void—✓Called when Next is clicked.
onPrev() => void—✓Called when Previous is clicked.
onJump(id: string) => void——Called with the selected question/section id from the summary panel.
showSummarybooleanfalse—Shows the Summary button that opens a jump-to panel.
summaryItemsQuizNavSummaryItem[]——Items shown in the summary panel: { id, label, completed? }.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  canNext={true}
  canPrev={true}
  onNext={...}
  onPrev={...}
  onJump="..."
  showSummary={false}
  summaryItems={[]}
/>
canNextcanPrevonNextonPrevonJumpshowSummarysummaryItems

Usage

tsx
import { QuizNavigation } from "@brickslab./ui-web";

<QuizNavigation
  canPrev={currentStep > 0}
  canNext={isCurrentValid}
  onPrev={() => setStep((s) => s - 1)}
  onNext={() => setStep((s) => s + 1)}
  showSummary
  summaryItems={sections.map((s) => ({ id: s.id, label: s.title, completed: s.isDone }))}
  onJump={(id) => jumpToSection(id)}
/>