mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
90131de012
Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
94 lines
2.3 KiB
Plaintext
94 lines
2.3 KiB
Plaintext
---
|
|
title: "Colonnes"
|
|
description: "Organisez des cartes et d'autres composants dans une grille responsive multicolonnes avec le composant columns, y compris un nombre de colonnes personnalisable."
|
|
keywords: ['groupes de cartes', 'mise en page en grille', 'mise en page multicolonnes']
|
|
boost: 3
|
|
---
|
|
|
|
Le composant `Columns` vous permet d'organiser du contenu dans une grille responsive. Il est le plus souvent utilisé pour disposer des cartes en grille, en spécifiant le nombre de colonnes. Vous pouvez également utiliser le sous-composant `Column` pour encapsuler du contenu arbitraire. Les colonnes sont responsives et s'ajustent automatiquement aux écrans plus petits.
|
|
|
|
<Columns cols={2}>
|
|
<Card title="Bien démarrer" icon="rocket">
|
|
Configurez votre projet avec notre guide de démarrage rapide.
|
|
</Card>
|
|
|
|
<Card title="Référence de l'API" icon="code">
|
|
Explorez les endpoints, paramètres et exemples de votre API.
|
|
</Card>
|
|
</Columns>
|
|
|
|
```mdx Columns example
|
|
<Columns cols={2}>
|
|
<Card title="Bien démarrer">
|
|
Configurez votre projet avec notre guide de démarrage rapide.
|
|
</Card>
|
|
<Card title="Référence de l'API">
|
|
Explorez les endpoints, paramètres et exemples de votre API.
|
|
</Card>
|
|
</Columns>
|
|
```
|
|
|
|
<div id="column-sub-component">
|
|
## Sous-composant Column
|
|
</div>
|
|
|
|
Utilisez le composant `Column` pour encapsuler du texte ou du code dans des colonnes individuelles. C'est utile lorsque vous souhaitez afficher du contenu arbitraire côte à côte, pas seulement des cartes ou d'autres composants.
|
|
|
|
<Columns cols={2}>
|
|
<Column>
|
|
|
|
**Installation**
|
|
|
|
```bash
|
|
npm install my-package
|
|
```
|
|
|
|
</Column>
|
|
<Column>
|
|
|
|
**Usage**
|
|
|
|
```javascript
|
|
import { init } from 'my-package';
|
|
init();
|
|
```
|
|
|
|
</Column>
|
|
</Columns>
|
|
|
|
````mdx Column sub-component example
|
|
<Columns cols={2}>
|
|
<Column>
|
|
|
|
**Installation**
|
|
|
|
```bash
|
|
npm install my-package
|
|
```
|
|
|
|
</Column>
|
|
<Column>
|
|
|
|
**Usage**
|
|
|
|
```javascript
|
|
import { init } from 'my-package';
|
|
init();
|
|
```
|
|
|
|
</Column>
|
|
</Columns>
|
|
````
|
|
|
|
<div id="properties">
|
|
## Propriétés
|
|
</div>
|
|
|
|
<ResponseField name="cols" type="number" default={2}>
|
|
Le nombre de colonnes par ligne. Accepte des valeurs de 1 à 4.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="className" type="string">
|
|
Classes CSS supplémentaires à appliquer au conteneur de colonnes.
|
|
</ResponseField>
|