Brickslab.Toolsv2.1.1

@brickslab./ui-webQuiz

Drag-and-drop rank ordering list with arrow fallback and position badges.

Full list

1
Price
2
Quality
3
Delivery speed
4
Customer support
5
Brand reputation

Top 3 only

1
Price
2
Quality
3
Delivery speed

Props

PropTypeDéfautRequisDescription
valuestring[]—✓Ordered array of option ids.
onChange(v: string[]) => void—✓Called with the reordered ids array.
optionsRankOption[]—✓Array of { id, label } options.
maxRanknumber——Limits the number of items shown (top N).
disabledbooleanfalse—Disables drag and arrow buttons.
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
  value="..."
  onChange="..."
  options={[]}
  maxRank={0}
  disabled={false}
/>
valueonChangeoptionsmaxRankdisabled

Usage

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

const [order, setOrder] = useState(["a", "b", "c"]);

<RankOrderQuestion
  value={order}
  onChange={setOrder}
  options={[
    { id: "a", label: "Feature A" },
    { id: "b", label: "Feature B" },
    { id: "c", label: "Feature C" },
  ]}
/>