Detail Dial

Выбор глубины объяснения: кратко, подробно, полный разбор. Бесплатно, MIT · Контент и соцсети › Интерактивные объяснения

Установка

npx valyro-cli@latest add detail-dial

npx shadcn@latest add https://valyro.xyz/r/detail-dial.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { DetailDial } from 'valyro-ui';

Prop	Type	Default
`levels` *	`DetailLevel[]`		Levels from the least to the most detailed, two to four. The texts are the author's: nothing is generated.
`summary`	`ReactNode`		The point that stays put above the changing text.
`value`	`string`		Id of the shown level. An unknown or disabled id shows the summary and an error.
`defaultValue`	`string`		Initial level when uncontrolled. Default: the first available.
`onValueChange`	`(id: string) => void`		Called with the new `value` when it changes.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	`horizontal` (default): a segmented control; `vertical`: a list of levels with their descriptions.
`transition`	`'none' \| 'fade'`	`'fade'`	How the text changes: `fade` (default) or `none`. Never animates the height; reduced motion drops the fade.
`labels`	`Partial<DetailDialLabels>`		Overrides for the built-in English text; keys left out keep their defaults.