CmRatioBar
Barra de proporção com blocos rotulados — quanto cada coisa ocupa do total — e, opcionalmente, uma alça que redistribui espaço entre dois blocos vizinhos. É o redimensionamento de partição de um instalador, e serve para qualquer divisão de um total fixo: cota, orçamento, capacidade.
Import
import { CmRatioBar } from "cosmemilton-ui/client";Ocupação em leitura
Segmentos com tom, rótulo e valor já formatado — sem alça, a barra é só leitura.
Disco 1 — NVMe 512 GB
Ocupação lida na varredura, antes de qualquer alteração.
Sem handleIndex a barra é só leitura: nenhuma alça é renderizada, nada recebe foco e nenhum elemento entra como slider na árvore de acessibilidade.
Alça dividindo o espaço
handleIndex + onChange, com min/max travando os limites e valueText descrevendo a divisão.
Redimensionar Windows
NVMe de 512 GB. Arraste a divisão ou mova pelo teclado, com a alça em foco.
Windows não desce de 60 GB nem passa de 450 GB: o teto efetivo é a soma do par menos o mínimo de 40 GB do Frevo OS, e não o max de 470 GB do próprio Windows.
Setas movem um passo (1 GB aqui), PageUp e PageDown movem dez passos, Home e End vão direto ao piso e ao teto. Sem step, a seta andaria 1% da soma do par.
Divisão travada
disabled mantém a fronteira visível — a barra continua explicando, só não deixa mexer.
Disco 2 — SSD SATA 256 GB
Volume ocupado: os arquivos não movíveis alcançam o fim da partição.
Limite atingido: Windows já está no piso de 198 GB. Rode a desfragmentação para liberar espaço e a alça volta a andar.
API rápida
Props principais de cada peça exportada.
CmRatioBar
CmRatioBarSegment
Notas
Sem handleIndex (ou sem onChange) a barra é só leitura — é o modo que serve para "ocupação do disco".
A alça move a fronteira entre handleIndex e handleIndex + 1: a soma desse par não muda e o resto da barra fica parado.
value é a grandeza BRUTA (bytes, GB, R$) e a largura é a fração dela sobre o total; valueLabel é o texto já formatado. A lib não escolhe unidade nem separador.
min/max de um segmento cruzam com os do vizinho para achar os limites efetivos da alça. Limites que se cruzam significam barra TRAVADA, não barra maluca: a alça simplesmente para de andar.
A alça é role="slider" e o único elemento focável: setas movem por step (padrão 1% da soma do par), PageUp/PageDown por dez passos, Home/End vão aos limites. É o que torna a divisão possível sem mouse.
Passe valueText para o leitor de tela ouvir a divisão em vez de um número cru, e handleLabel para nomear a alça (padrão "Divisão").
onChange recebe os valores NOVOS de todos os blocos, na mesma ordem de segments.
height aceita número (px) ou string e vira --cm-ratio-bar-height.