ListRow

Ejemplos

import { List, ListRow } from "sebs7n-ui/list-row"
import { ReceiptIcon } from "lucide-react"
import { useState } from "react"

function Maestra() {
  const [elegido, setElegido] = useState("nube")
  return (
    <List aria-label="Clientes" className="w-full max-w-md">
      {CLIENTES.map((cliente) => (
        <ListRow
          description={cliente.detalle}
          icon={<ReceiptIcon />}
          key={cliente.id}
          onClick={() => setElegido(cliente.id)}
          selected={elegido === cliente.id}
          title={cliente.nombre}
          trailing={cliente.saldo}
        />
      ))}
    </List>
  )
}

import { FileTextIcon, FolderIcon, ImageIcon } from "lucide-react"
import { List, ListRow, ListSection } from "sebs7n-ui/list-row"

function Desglose() {
  return (
    <List aria-label="Espacio usado" className="w-full max-w-xl">
      <ListSection title="Usado por la cuenta" total="23,6 GB">
        <ListRow description="1.204 comprobantes" dot="amber" icon={<FileTextIcon />} inline title="Facturas" trailing="13,5 GB" />
        <ListRow description="Todos los archivos" dot="purple" icon={<FolderIcon />} inline title="Documentos" trailing="6,1 GB" />
        <ListRow description="Logos y firmas" dot="teal" icon={<ImageIcon />} inline title="Imágenes" trailing="4,0 GB" />
      </ListSection>
    </List>
  )
}

import { List, ListRow } from "sebs7n-ui/list-row"

function Navegacion() {
  return (
    <List aria-label="Ajustes de facturación" className="w-full max-w-md">
      <ListRow chevron render={<a href="#datos-fiscales" />} title="Datos fiscales" />
      <ListRow chevron description="2 puntos de venta" render={<a href="#puntos-de-venta" />} title="Puntos de venta" />
      <ListRow chevron render={<a href="#numeracion" />} title="Numeración" trailing="0001-00000124" />
    </List>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

Teclado

Tab

Recorre las filas interactivas (las que tienen onClick o render). Las demás no son paradas.

Enter

Activa la fila: el botón o el link.

Espacio

Activa la fila si es un botón.

Accesibilidad

• List es un <ul role="list"> y cada ListRow un <li>: el lector cuenta los ítems (el role explícito es para Safari, que se lo saca a una lista sin viñetas).
• ListSection es un <li> con su propia lista adentro, nombrada por el título (aria-labelledby): el lector dice «Usado por la cuenta, lista, 3 ítems».
• Con onClick la fila es un <button>; con render es tu <a>. Nunca un <div> clickeable.
• selected suma aria-current="true" en la fila interactiva: el ítem que está abierto en el panel de detalle.
• El ícono, el punto y el chevron son decorativos (aria-hidden). El punto de color no puede ser el único dato: la categoría tiene que estar en el texto.
• La lista lleva tabIndex={-1}, como la Table: un click en una fila deja el foco adentro y la elegida sigue en el acento. Sin foco adentro, la elegida es gris.

Reglas de uso

• Para una lista, no una tabla. Si las columnas se comparan entre filas (importe, fecha, estado), es una Table. Si cada fila es una cosa con su nombre y un dato, es una List.
• `description` debajo del título para la lista maestra (Mail, clientes); `inline` para un desglose donde el detalle es una columna (Almacenamiento).
• `chevron` solo en filas que navegan a otra pantalla. Una fila que abre el detalle al lado (split view) no lleva chevron: lleva selected.
• Color propio adentro de una fila elegida → `selectionSecondaryClassName`. Funciona igual que en la Table.
• Las props de texto se llaman como las de CardRow (title, description, trailing): pasar de un widget a una lista es cambiar el componente, no las props.
• Sin caja: la lista vive sobre la página o en un panel. Para listas largas, virtualizá vos y pasale las filas visibles.

Relacionados