Composants de mise en page

Back to Component Library

Return to the main component library index

Card Components

Composants de carte

ScrollBox

Un conteneur défilable à utiliser à l’intérieur des composants de carte. Fournit une zone défilable avec une hauteur maximale facultative et un indicateur de défilement. Importer :

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

Props :

Prop	Type	Par défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Contenu à afficher dans la zone de défilement
`maxHeight`	`number\|string`	`300`	Non	Hauteur maximale avant le défilement (px ou valeur CSS)
`showHint`	`boolean`	`true`	Non	Si afficher l’indication « Défiler pour en savoir plus »
`style`	`object`	-	Non	Styles supplémentaires

Exemples :

Live Example
Code

Scrollable Content

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

List Components

Composants de liste

StepList

Affiche une liste d’éléments en tant que Étapes. Affiche un tableau d’éléments en utilisant les composants Steps/Step. Importer :

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

Props :

Prop	Type	Défaut	Requis	Description
`listItems`	`Array`	-	Oui	Tableau d’objets d’étape
`listItems[].title`	`string`	-	Oui	Titre de l’étape
`listItems[].icon`	`string`	-	Non	Nom de l’icône facultatif
`listItems[].content`	`ReactNode`	-	Oui	Contenu de l’étape

Exemples :

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

Affiche une liste d’étapes avec des liens de navigation. Similaire à StepList, mais chaque étape contient un composant GotoLink. Importer :

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

Props :

Prop	Type	Défaut	Requis	Description
`listItems`	`Array`	-	Oui	Tableau d’objets d’étape avec des liens
`listItems[].title`	`string`	-	Oui	Titre de l’étape
`listItems[].icon`	`string`	-	Non	Nom d’icône facultatif
`listItems[].content`	`string`	-	Oui	Texte du libellé du lien
`listItems[].link`	`string`	-	Oui	Chemin relatif pour le lien

BasicList, IconList, UpdateList, UpdateLinkList

Composants de remplissage pour la fonctionnalité de liste. Actuellement, ils retournent des fragments vides (non fonctionnels). Remarque : Ces composants sont des éléments de remplissage et actuellement non fonctionnels.

Step Components

Composants Étape

StyledSteps

Un composant Steps personnalisable avec un support de couleur et de style. Enveloppe le composant Steps standard avec un style CSS personnalisé. Importation :

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

Props :

Prop	Type	Défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Composants d’étape à afficher
`iconColor`	`string`	`"#18794E"`	Non	Couleur de fond pour les icônes d’étape
`titleColor`	`string`	Conscient du thème	Non	Couleur des titres d’étape
`lineColor`	`string`	orienté thème	Non	Couleur de la ligne de connexion entre les étapes
`iconSize`	`string`	`"24px"`	Non	Taille des icônes des étapes (actuellement non utilisée)

Exemples :

Code

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

StyledStep

Un wrapper pour le composant Step avec une taille de titre personnalisable. Conçu pour être utilisé dans StyledSteps. Importation :

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

Props :

Prop	Type	Par défaut	Requis	Description
`title`	`string`	-	Oui	Le titre de l’étape
`icon`	`string`	-	Non	Nom de l’icône à afficher
`titleSize`	`string`	`"h3"`	Non	Taille de l’en-tête HTML pour le titre (par exemple, “h1”, “h2”, “h3”)
`children`	`ReactNode`	-	Oui	Contenu à afficher dans l’étape

Table Components

Composants de tableau

DynamicTable

Un composant de tableau réutilisable avec un style cohérent sur le site. Affiche un tableau avec des en-têtes et des lignes de données, avec des colonnes monospaces optionnelles. Importer :

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

Props :

Prop	Type	Défaut	Requis	Description
`tableTitle`	`string`	`null`	Non	Titre facultatif à afficher au-dessus du tableau
`headerList`	`Array<string>`	`[]`	Oui	Tableau de chaînes pour les en-têtes de colonne
`itemsList`	`Array<Object>`	`[]`	Oui	Tableau d’objets où les clés correspondent aux valeurs de headerList
`monospaceColumns`	`Array<number>`	`[]`	Non	Tableau des indices de colonne (commençant à 0) à afficher en mode monospace
`margin`	`string`	-	Non	Remplacement CSS de la marge facultatif (par exemple, “0”, “1rem 0”)

Exemples :

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

Composants de grille

QuadGrid

Un layout de grille à 2 colonnes avec une icône animée tournante au centre. Utile pour afficher quatre éléments dans une grille avec un élément décoratif au centre. Importer :

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

Props :

Prop	Type	Par défaut	Requis	Description
`children`	`ReactNode`	-	Oui	Quatre éléments enfants à afficher dans une grille
`icon`	`string`	`"arrows-spin"`	Non	Nom de l’icône à afficher au centre
`iconSize`	`number`	`50`	Non	Taille de l’icône centrale
`iconColor`	`string`	`"var(--accent)"`	Non	Couleur de l’icône centrale
`spinDuration`	`string`	`"10s"`	Non	Durée d’animation pour l’icône tournante

Exemples :

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

Composants de mise en page

Back to Component Library

Composants de carte

ScrollBox

Scrollable Content

Composants de liste

StepList

StepLinkList

BasicList, IconList, UpdateList, UpdateLinkList

Composants Étape

StyledSteps

StyledStep

Composants de tableau

DynamicTable

Composants de grille

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

​Composants de carte

​ScrollBox

Scrollable Content

​Composants de liste

​StepList

​StepLinkList

​BasicList, IconList, UpdateList, UpdateLinkList

​Composants Étape

​StyledSteps

​StyledStep

​Composants de tableau

​DynamicTable

​Composants de grille

​QuadGrid

Item 1

Item 2

Item 3

Item 4

Next: Integration Components

Composants de carte

ScrollBox

Composants de liste

StepList

StepLinkList

BasicList, IconList, UpdateList, UpdateLinkList

Composants Étape

StyledSteps

StyledStep

Composants de tableau

DynamicTable

Composants de grille

QuadGrid