Tier List

Тир-лист S+…D: портреты с бейджем роли, фильтр ролей, перетаскивание мышью, тачем и с клавиатуры, экспорт. Pro · Игры › Мета и тир-листы

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add tier-list

npm install valyro-ui-pro

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

Пропсы

Prop	Type	Default
`items` *	`TierItem[]`		Everything that can be ranked. Items in no tier wait in the unranked row.
`tiers`	`TierDef[]`	`DEFAULT_TIERS`	Tiers from best to worst. Default S+, S, A, B, C, D.
`roles`	`GameRole[]`		Roles of the items: badges on the portraits and, with two or more, a role filter.
`value`	`TierPlacement`		Tier id → item ids in order.
`defaultValue`	`TierPlacement`	`{}`	Initial placement when uncontrolled. Default: everything unranked.
`onValueChange`	`(value: TierPlacement) => void`		Called with the new placement after every drop.
`roleFilter`	`string`		Role id the list is narrowed to; `''` shows every role.
`defaultRoleFilter`	`string`	`''`	Initial role filter when uncontrolled. Default `''` (every role).
`onRoleFilterChange`	`(role: string) => void`		Called when the reader picks a role.
`mode`	`'view' \| 'edit'`		`view` reads the list; `edit` drags items between tiers and shows the unranked row.
`defaultMode`	`'view' \| 'edit'`	`'view'`	Initial mode when uncontrolled. Default `view`.
`onModeChange`	`(mode: TierListMode) => void`		Called when the reader switches the mode.
`editable`	`boolean`	`true`	Shows the view / edit switch. Default true; false keeps the list read-only unless `mode` is `edit`.
`exportable`	`boolean`	`true`	Shows the copy-as-text and download buttons. Default true.
`exportName`	`string`	`'tier-list'`	File name of the JSON download, without the extension. Default `tier-list`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Portraits of 40, 52 or 64 px. Default `md`.
`showNames`	`boolean`	`true`	Names under the portraits. Default true; without them the name is in the tooltip and read aloud.
`renderItem`	`(item: TierItem, mode: TierListMode) => ReactNode`		Custom tile content, e.g. a portrait with a hover card. Default: portrait, role badge and name.
`onItemClick`	`(item: TierItem) => void`		Makes tiles buttons in view mode.
`title`	`ReactNode`		Heading. Default: `labels.title`.
`caption`	`ReactNode`		Line under the heading: patch, rank, sample.
`headingLevel`	`2 \| 3 \| 4 \| 5`	`3`	Level of the heading (default 3).
`labels`	`Partial<TierListLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Tier List

Установка

Пропсы

Похожие компоненты