mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
21ee5a1cc1
Generated-By: mintlify-agent Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
89 lines
2.1 KiB
Plaintext
89 lines
2.1 KiB
Plaintext
---
|
|
title: "Colonnes"
|
|
description: "Organisez des cartes et d'autres composants dans une grille responsive avec un nombre de colonnes personnalisable."
|
|
keywords: ['groupes de cartes', 'mise en page en grille', 'mise en page multicolonnes']
|
|
---
|
|
|
|
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>
|