Componentes de diseño

Back to Component Library

Return to the main component library index

Card Components

Componentes de tarjeta

ScrollBox

Un contenedor desplazable para usar dentro de los componentes Card. Proporciona un área desplazable con altura máxima opcional y pista de desplazamiento. Importar:

import { ScrollBox } from "/snippets/components/layout/cards.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Contenido para mostrar en el área de desplazamiento
`maxHeight`	`number\|string`	`300`	No	Altura máxima antes de desplazarse (px o valor CSS)
`showHint`	`boolean`	`true`	No	Si mostrar la pista “Desplácese para más”
`style`	`object`	-	No	Estilos adicionales

Ejemplos:

Live Example
Code

Scrollable Content

<Card title="Gaming">
  <ScrollBox maxHeight={200} showHint={true}>
    <p>Long content here...</p>
  </ScrollBox>
</Card>

List Components

Componentes de lista

StepList

Renderiza una lista de elementos como pasos. Muestra un array de elementos usando los componentes Steps/Step. Importar:

import { StepList } from "/snippets/components/layout/lists.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`listItems`	`Array`	-	Sí	Matriz de objetos de paso
`listItems[].title`	`string`	-	Sí	Título del paso
`listItems[].icon`	`string`	-	No	Nombre del icono opcional
`listItems[].content`	`ReactNode`	-	Sí	Contenido del paso

Ejemplos:

Code

// StepList - use Steps/Step directly for now
<Steps>
  <Step title="Install" icon="download">
    Run npm install
  </Step>
  <Step title="Configure" icon="gear">
    Set up your config
  </Step>
</Steps>

StepLinkList

Renderiza una lista de pasos con enlaces de navegación. Similar a StepList, pero cada paso contiene un componente GotoLink. Importar:

import { StepLinkList } from "/snippets/components/layout/lists.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`listItems`	`Array`	-	Sí	Matriz de objetos de paso con enlaces
`listItems[].title`	`string`	-	Sí	Título del paso
`listItems[].icon`	`string`	-	No	Nombre del icono opcional
`listItems[].content`	`string`	-	Sí	Texto de la etiqueta del enlace
`listItems[].link`	`string`	-	Sí	Ruta relativa para el enlace

BasicList, IconList, UpdateList, UpdateLinkList

Componentes de marcador de posición para la funcionalidad de lista. Actualmente devuelven fragmentos vacíos (no funcionales). Nota: Estos son componentes de marcador de posición y actualmente no son funcionales.

Step Components

Componentes de paso

StyledSteps

Un componente Steps personalizable con soporte de color y estilo. Envuelve el componente Steps estándar con estilo CSS personalizado. Importar:

import { StyledSteps, StyledStep } from "/snippets/components/layout/steps.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Componentes de paso para renderizar
`iconColor`	`string`	`"#18794E"`	No	Color de fondo para los íconos de paso
`titleColor`	`string`	con conciencia de tema	No	Color para los títulos de paso
`lineColor`	`string`	con conciencia del tema	No	Color de la línea de conexión entre los pasos
`iconSize`	`string`	`"24px"`	No	Tamaño de los íconos de los pasos (actualmente no utilizado)

Ejemplos:

Code

<StyledSteps iconColor="#00cc88" titleColor="#00cc88">
  <StyledStep title="Install" icon="download">
    Run npm install.
  </StyledStep>
</StyledSteps>

StyledStep

Un contenedor para el componente Step con tamaño de título personalizable. Diseñado para usarse dentro de StyledSteps. Importar:

import { StyledStep } from "/snippets/components/layout/steps.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`title`	`string`	-	Sí	El título del paso
`icon`	`string`	-	No	Nombre del ícono a mostrar
`titleSize`	`string`	`"h3"`	No	Tamaño de encabezado HTML para el título (por ejemplo, “h1”, “h2”, “h3”)
`children`	`ReactNode`	-	Sí	Contenido para mostrar en el paso

Table Components

Componentes de tabla

DynamicTable

Un componente de tabla reutilizable con estilo coherente del sitio. Muestra una tabla con encabezados y filas de datos, con columnas opcionales en monoespacio. Importar:

import { DynamicTable } from "/snippets/components/layout/table.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`tableTitle`	`string`	`null`	No	Título opcional para mostrar encima de la tabla
`headerList`	`Array<string>`	`[]`	Sí	Matriz de cadenas para los encabezados de columna
`itemsList`	`Array<Object>`	`[]`	Sí	Matriz de objetos donde las claves coinciden con los valores de headerList
`monospaceColumns`	`Array<number>`	`[]`	No	Matriz de índices de columna (basados en 0) para mostrar en monospace
`margin`	`string`	-	No	Sobrescritura de margen CSS opcional (por ejemplo, “0”, “1rem 0”)

Ejemplos:

Live Example
Code

Network Endpoints

Network	Endpoint	Status

<DynamicTable
  headerList={["Network", "Endpoint", "Status"]}
  itemsList={[
    { Network: "Mainnet", Endpoint: "https://livepeer.network", Status: "Active" }
  ]}
  monospaceColumns={[1]}
  margin="1rem 0"
/>

Grid Components

Componentes de cuadrícula

QuadGrid

Un diseño de cuadrícula de 2 columnas con un icono giratorio animado en el centro. Útil para mostrar cuatro elementos en una cuadrícula con un elemento decorativo en el centro. Importar:

import { QuadGrid } from "/snippets/components/layout/quadGrid.jsx";

Props:

Prop	Tipo	Predeterminado	Requerido	Descripción
`children`	`ReactNode`	-	Sí	Cuatro elementos secundarios para mostrar en cuadrícula
`icon`	`string`	`"arrows-spin"`	No	Nombre del icono para mostrar en el centro
`iconSize`	`number`	`50`	No	Tamaño del icono central
`iconColor`	`string`	`"var(--accent)"`	No	Color of the center icon
`spinDuration`	`string`	`"10s"`	No	Animation duration for spinning icon

Examples:

Live Example
Code

Item 1

Content 1

Item 2

Content 2

Item 3

Content 3

Item 4

Content 4

<QuadGrid icon="arrows-spin" iconSize={50}>
  <Card title="Item 1">Content 1</Card>
  <Card title="Item 2">Content 2</Card>
  <Card title="Item 3">Content 3</Card>
  <Card title="Item 4">Content 4</Card>
</QuadGrid>

Next: Integration Components

Continue to Integration Components →

Home

Documentation Guide

Livepeer Concepts

Developer References

Gateway References

Orchestrator References

LPT & Delegator References

Community Resources

Partner Resources

Help Center

Technical References

Changelog

Back to Component Library

Componentes de tarjeta

ScrollBox

Scrollable Content

Componentes de lista

StepList

StepLinkList

BasicList, IconList, UpdateList, UpdateLinkList

Componentes de paso

StyledSteps

StyledStep

Componentes de tabla

DynamicTable

Componentes de cuadrícula

QuadGrid

Item 1

Item 2

Item 3

Item 4

Next: Integration Components

Home

Documentation Guide

Livepeer Concepts

Developer References

Gateway References

Orchestrator References

LPT & Delegator References

Community Resources

Partner Resources

Help Center

Technical References

Changelog

Back to Component Library

​Componentes de tarjeta

​ScrollBox

Scrollable Content

​Componentes de lista

​StepList

​StepLinkList

​BasicList, IconList, UpdateList, UpdateLinkList

​Componentes de paso

​StyledSteps

​StyledStep

​Componentes de tabla

​DynamicTable

​Componentes de cuadrícula

​QuadGrid

Item 1

Item 2

Item 3

Item 4

Next: Integration Components

Componentes de tarjeta

ScrollBox

Componentes de lista

StepList

StepLinkList

BasicList, IconList, UpdateList, UpdateLinkList

Componentes de paso

StyledSteps

StyledStep

Componentes de tabla

DynamicTable

Componentes de cuadrícula

QuadGrid