El List Item es el componente base para representar ítems dentro de listas y tablas. Estructura información de forma jerárquica combinando un título principal con elementos opcionales de soporte: overline, descripción, ícono leading, etiquetas secundarias y un elemento trailing configurable. Se adapta a Desktop y Mobile, y admite distintos tipos de interacción en el slot derecho según el contexto de uso.
Punto de venta
Link de pago
Pendiente
PendienteDefault · With Action · Composed
Punto de venta
Link de pago
Pendiente
PendientePunto de venta
Link de pago
Punto de venta
Link de pago
Todas las props disponibles para el componente List Item.
| Prop | Type | Default | Description |
|---|---|---|---|
id | number | string | — | Identificador único del item. |
onItemClick | function | — | Callback al hacer click en el item, recibe el id como argumento. |
children | ReactNode | — | Contenido del list item |
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label del header. |
icon | string | — | Icono que se muestra a la izquierda del label. |
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Titulo principal. |
description | string | — | Descripcion. |
icon | string | — | Icono que se muestra a la izquierda del titulo y descripcion. |
labels | {icon: string, label: string}[] | — | Labels que se muestran en el footer del list item. |
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Titulo principal. |
description | string | — | Descripcion. |
label | string | — | Label que se muestran en el footer del list-item-info. |
icon | string | — | Icono que se muestra a la izquierda del label. |
children | ReactNode | — | Cuando se envia esta propiedad, no se muestra ninguna de las propiedades anteriores. |
1{2 "name": "ListItem",3 "description": "Item de lista con estilo consistente.",4 "component": "ListItem",5 "files": [6 "components/base/data-display/lists/listItem/ListItem.tsx"7 ],8 "dependencies": [9 "react"10 ],11 "props": {12 "id": {13 "type": "number | string",14 "description": "Identificador único del item."15 },16 "onItemClick": {17 "type": "function",18 "description": "Callback al hacer click en el item, recibe el id como argumento."19 },20 "children": {21 "type": "ReactNode",22 "required": true,23 "description": "Contenido del list item"24 }25 }26}1{2 "name": "ListItemHeader",3 "description": "Header del list item.",4 "component": "ListItemHeader",5 "files": [6 "components/base/data-display/lists/listItem/ListItemHeader.tsx"7 ],8 "dependencies": [9 "react"10 ],11 "props": {12 "label": {13 "type": "string",14 "required": true,15 "description": "Label del header."16 },17 "icon": {18 "type": "string",19 "description": "Icono que se muestra a la izquierda del label."20 }21 }22}1{2 "name": "ListItemContent",3 "description": "Contenido principal del list item.",4 "component": "ListItemContent",5 "files": [6 "components/base/data-display/lists/listItem/ListItemContent.tsx"7 ],8 "dependencies": [9 "react"10 ],11 "props": {12 "title": {13 "type": "string",14 "required": true,15 "description": "Titulo principal."16 },17 "description": {18 "type": "string",19 "required": true,20 "description": "Descripcion."21 },22 "icon": {23 "type": "string",24 "description": "Icono que se muestra a la izquierda del titulo y descripcion."25 },26 "labels": {27 "type": "{icon: string, label: string}[]",28 "description": "Labels que se muestran en el footer del list item."29 }30 }31}1{2 "name": "ListItemInfo",3 "description": "Componente opcional, muestra informacion adicional.",4 "component": "ListItemInfo",5 "files": [6 "components/base/data-display/lists/listItem/ListItemInfo.tsx"7 ],8 "dependencies": [9 "react"10 ],11 "props": {12 "title": {13 "type": "string",14 "description": "Titulo principal."15 },16 "description": {17 "type": "string",18 "description": "Descripcion."19 },20 "label": {21 "type": "string",22 "description": "Label que se muestran en el footer del list-item-info."23 },24 "icon": {25 "type": "string",26 "description": "Icono que se muestra a la izquierda del label."27 },28 "children": {29 "type": "ReactNode",30 "description": "Cuando se envia esta propiedad, no se muestra ninguna de las propiedades anteriores."31 }32 }33}