Carta da Lista de Barras
A lista de quebras de análise - tráfego por dispositivo, navegador, sistema operacional, país ou fonte como linhas classificadas cujas barras de fundo codificam a partilha de cada item, etiqueta na barra, métrica à direita. Nossas tabulações sublinhadas alternam entre listas, a legenda métrica fica na mesma linha de base, e listas longas desaparecem atrás de uma pequena pílula que expande o resto para que o cartão cresça com elas.
Instalação
O Bar List Card faz parte do BoardUI Pro.
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Listas de páginas
tabs é { id, label, items }[]; cada artigo pode conter um ícone - bandeiras, favicons, qualquer coisa 16px. Compartilhamentos são relativos ao total da aba, larguras de barras para o seu maior item.
import * as Flags from "country-flag-icons/react/3x2";
<BarListCard metricLabel="Visitors" tabs={[ { id: "countries", label: "Countries", items: [ { label: "United States of America", value: 3120, icon: <Flags.US className="h-3 w-[18px] rounded-[2px]" /> }, { label: "India", value: 2160, icon: <Flags.IN className="h-3 w-[18px] rounded-[2px]" /> }, // … ], }, { id: "sources", label: "Sources", items: [{ label: "Direct", value: 5240 }, /* … */] }, ]} defaultTab="countries" onTabChange={(id) => track("breakdown_tab", { id })}/>Lista única e mono
Passar itens + título para uma lista sem abas, metric="value" imprimir números brutos em vez de ações, e mono para uma única tinta cinzenta.
{/* One list, no tabs - a heading takes the tab strip's place */}<BarListCard title="Pages" metricLabel="Views" metric="value" items={pages} limit={4} />
{/* Single ink, mono grey bars */}<BarListCard mono />