BeeFlex

Un conteneur flexbox pour aligner et espacer des éléments, avec un passage automatique en colonne sur petit écran.

import { BeeFlex } from "@thaisrr/beedesign";
import "@thaisrr/beedesign/style.css";

Utilisation

Les éléments se placent dans le slot par défaut. Par défaut, ils sont centrés, espacés de lg, et passent à la ligne si la place manque.

Premier

Deuxième

Troisième

<script setup lang="ts">
import { BeeCard, BeeFlex } from "@thaisrr/beedesign";
</script>

<template>
  <BeeFlex>
    <BeeCard>Premier</BeeCard>
    <BeeCard>Deuxième</BeeCard>
    <BeeCard>Troisième</BeeCard>
  </BeeFlex>
</template>

Justify

La prop justify règle la répartition sur l'axe principal.

flex-start

UnDeuxTrois

center

UnDeuxTrois

flex-end

UnDeuxTrois

space-between

UnDeuxTrois

<script setup lang="ts">
import { BeeFlex, BeeTag } from "@thaisrr/beedesign";
</script>

<template>
  <div class="stack">
    <div v-for="value in ['flex-start', 'center', 'flex-end', 'space-between'] as const" :key="value">
      <code>{{ value }}</code>
      <BeeFlex :justify="value" :gap="8" class="frame">
        <BeeTag>Un</BeeTag>
        <BeeTag>Deux</BeeTag>
        <BeeTag>Trois</BeeTag>
      </BeeFlex>
    </div>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.frame {
  margin-top: 0.4rem;
  padding: 0.5rem;
  border: 1px dashed var(--bd-color-border-strong);
  border-radius: var(--bd-radius-sm);
}
</style>

Align

La prop align règle l'alignement sur l'axe secondaire.

flex-start

A

B

C

center

A

B

C

flex-end

A

B

C

stretch

A

B

C

<script setup lang="ts">
import { BeeFlex } from "@thaisrr/beedesign";
</script>

<template>
  <div class="stack">
    <div v-for="value in ['flex-start', 'center', 'flex-end', 'stretch'] as const" :key="value">
      <code>{{ value }}</code>
      <BeeFlex :align="value" justify="flex-start" :gap="8" :responsive="false" class="frame">
        <div class="box" style="height: 2rem">A</div>
        <div class="box" style="height: 3.5rem">B</div>
        <div class="box">C</div>
      </BeeFlex>
    </div>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.frame {
  margin-top: 0.4rem;
  padding: 0.5rem;
  border: 1px dashed var(--bd-color-border-strong);
  border-radius: var(--bd-radius-sm);
}

.box {
  min-width: 3rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--bd-radius-sm);
  background: var(--bd-color-primary-light);
  color: var(--bd-color-primary-dark);
  text-align: center;
}
</style>

Gap

La prop gap accepte un mot-clé (none, sm, md, lg) lié aux tokens d'espacement, ou un nombre en pixels.

gap="none"

UnDeuxTrois

gap="sm"

UnDeuxTrois

gap="md"

UnDeuxTrois

gap="lg"

UnDeuxTrois

:gap="48"

UnDeuxTrois

<script setup lang="ts">
import { BeeFlex, BeeTag } from "@thaisrr/beedesign";
</script>

<template>
  <div class="stack">
    <div v-for="value in ['none', 'sm', 'md', 'lg', 48] as const" :key="value">
      <code>{{ typeof value === "number" ? `:gap="${value}"` : `gap="${value}"` }}</code>
      <BeeFlex :gap="value" justify="flex-start" :responsive="false" class="frame">
        <BeeTag>Un</BeeTag>
        <BeeTag>Deux</BeeTag>
        <BeeTag>Trois</BeeTag>
      </BeeFlex>
    </div>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.frame {
  margin-top: 0.4rem;
}
</style>

Direction

Avec direction="column", les éléments s'empilent verticalement.

<script setup lang="ts">
import { BeeButton, BeeFlex } from "@thaisrr/beedesign";
</script>

<template>
  <BeeFlex direction="column" align="flex-start" :gap="12" :responsive="false">
    <BeeButton>Enregistrer</BeeButton>
    <BeeButton variant="secondary">Annuler</BeeButton>
    <BeeButton variant="ghost">En savoir plus</BeeButton>
  </BeeFlex>
</template>

Responsive

Par défaut, sous 768px de large, le conteneur passe en colonne et centre ses éléments. Désactivez ce comportement avec :responsive="false".

Empilé sous 768px

Réduisez la fenêtre

pour voir la différence

<script setup lang="ts">
import { BeeCard, BeeFlex } from "@thaisrr/beedesign";
</script>

<template>
  <BeeFlex>
    <BeeCard>Empilé sous 768px</BeeCard>
    <BeeCard>Réduisez la fenêtre</BeeCard>
    <BeeCard>pour voir la différence</BeeCard>
  </BeeFlex>
</template>

API

Props

Nom	Type	Défaut	Description
justify	"flex-start" | "flex-end" | "center" | "space-between"	"center"	Répartition sur l'axe principal.
align	"flex-start" | "flex-end" | "center" | "stretch"	"center"	Alignement sur l'axe secondaire.
direction	"row" | "column"	"row"	Direction de l'axe principal.
gap	"none" | "sm" | "md" | "lg" | number	"lg"	Espacement. Un nombre est en pixels.
responsive	boolean	true	Passe en colonne centrée sous 768px.

Slots

Nom	Description
default	Éléments à disposer.

Variables CSS utilisées

--bd-space-sm, --bd-space-md, --bd-space-lg.