Layout — BcLayoutRow & BcLayoutColumn
Composants de mise en page flexbox pour structurer les contenus en colonnes dans les pages et templates Vue.
BcLayoutRow
Conteneur flexbox horizontal. Wrapping activé par défaut, gap et alignement configurables.
Démo
Colonne A (33%)
Colonne B (33%)
Colonne C (33%)
vue
<BcLayoutRow :gap="12">
<BcLayoutColumn :width="33">Colonne A</BcLayoutColumn>
<BcLayoutColumn :width="33">Colonne B</BcLayoutColumn>
<BcLayoutColumn :width="33">Colonne C</BcLayoutColumn>
</BcLayoutRow>Layout 1/3 + 2/3
Sidebar (33%)
Contenu principal (66%)
vue
<BcLayoutRow :gap="16" align="start">
<BcLayoutColumn :width="33">Sidebar</BcLayoutColumn>
<BcLayoutColumn :width="66">Contenu principal</BcLayoutColumn>
</BcLayoutRow>Props — BcLayoutRow
| Prop | Type | Default | Description |
|---|---|---|---|
gap | number | 12 | Espacement entre colonnes (px) |
wrap | boolean | true | Retour à la ligne si dépassement |
align | "start" | "center" | "end" | "stretch" | "stretch" | Alignement vertical des colonnes |
justify | "start" | "center" | "end" | "between" | "start" | Justification horizontale |
Slots — BcLayoutRow
| Slot | Description |
|---|---|
default | Contenu (typiquement des BcLayoutColumn) |
BcLayoutColumn
Colonne avec largeur en pourcentage, hauteur minimale et padding optionnel. Délimitation visuelle par bordure tiretée (utile pour visualiser les zones en construction).
Props — BcLayoutColumn
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 50 | Largeur en % — clamped [10, 100] |
minHeight | number | 80 | Hauteur minimale (px) |
padded | boolean | true | Padding interne de 8px |
Slots — BcLayoutColumn
| Slot | Description |
|---|---|
default | Contenu de la colonne |
Exemple complet
vue
<BcLayoutRow :gap="16" align="stretch" justify="between">
<BcLayoutColumn :width="25" :min-height="0">
<BcStatCard label="Clients" value="1 284" />
</BcLayoutColumn>
<BcLayoutColumn :width="25" :min-height="0">
<BcStatCard label="Dossiers" value="342" />
</BcLayoutColumn>
<BcLayoutColumn :width="25" :min-height="0">
<BcStatCard label="Alertes" value="7" />
</BcLayoutColumn>
<BcLayoutColumn :width="25" :min-height="0">
<BcStatCard label="Score moyen" value="82%" />
</BcLayoutColumn>
</BcLayoutRow>