ComponentesGeneral
Drag Handle
Alça de arrasto (`mk-drag-handle`) para reordenar itens, usada pelo `mk-list` com `reorderable`.
mk-drag-handle é o ponto por onde o usuário pega um item para reordená-lo. É um <button> com o ícone de seis pontos e não move nada sozinho: o componente que o usa, como o List com reorderable, controla o arrasto e o estado dragging.
Padrão
import { MkDragHandle } from '@db1/makuco-ui-react';
<MkDragHandle label="Mover Revisar PR" /><mk-drag-handle label="Mover Revisar PR"></mk-drag-handle>Estados
- Repouso: ícone
gripem--icon-low-emphasis. - Hover: ícone
grip-verticalem--icon-high-emphasise cursorgrab. dragging: ícone na cor da marca e cursorgrabbing.disabled: cor de desabilitado, sem foco e sem arrasto.
Props — mk-drag-handle
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
label | string | — | Nome acessível do botão. Diga o que será movido (ex.: "Mover Revisar PR"). Sem ele, usa "Arrastar para reordenar" no idioma da página. |
description | string | — | Dica lida depois do nome (ex.: como mover com o teclado). Vai para aria-description. |
dragging | boolean | false | Arrasto em andamento: cor de marca e cursor grabbing. Controlado pelo componente pai. |
disabled | boolean | false | Desabilita a alça: sem foco, sem arrasto e com a cor de desabilitado. |
Acessibilidade
<button type="button">na ordem de Tab;labeldefine o nome acessível edescriptionviraaria-description.- A área de 32 × 32 px atende ao alvo mínimo da WCAG 2.5.8.