BeeGrid

Une grille de colonnes de largeur égale, qui passe sur une seule colonne sur petit écran.

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

Utilisation

La prop columns est obligatoire. Les éléments se placent dans le slot par défaut et remplissent la grille ligne par ligne.

Un

Deux

Trois

Quatre

Cinq

Six

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

<template>
  <BeeGrid :columns="3">
    <BeeCard>Un</BeeCard>
    <BeeCard>Deux</BeeCard>
    <BeeCard>Trois</BeeCard>
    <BeeCard>Quatre</BeeCard>
    <BeeCard>Cinq</BeeCard>
    <BeeCard>Six</BeeCard>
  </BeeGrid>
</template>

Gap

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

gap="none"

1234

gap="sm"

1234

gap="md"

1234

gap="lg"

1234

:gap="48"

1234

<script setup lang="ts">
import { BeeGrid, 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>
      <BeeGrid :columns="4" :gap="value" :responsive="false" class="frame">
        <BeeTag v-for="n in 4" :key="n" class="cell">{{ n }}</BeeTag>
      </BeeGrid>
    </div>
  </div>
</template>

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

.frame {
  margin-top: 0.4rem;
}

.cell {
  justify-content: center;
}
</style>

Étendre un élément

Un élément peut occuper plusieurs colonnes avec grid-column dans votre propre CSS.

Sur deux colonnes

Une colonne

Une colonne

Sur deux colonnes

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

<template>
  <BeeGrid :columns="3">
    <BeeCard class="wide">Sur deux colonnes</BeeCard>
    <BeeCard>Une colonne</BeeCard>
    <BeeCard>Une colonne</BeeCard>
    <BeeCard class="wide">Sur deux colonnes</BeeCard>
  </BeeGrid>
</template>

<style scoped>
.wide {
  grid-column: span 2;
}
</style>

Responsive

Par défaut, sous 1000px de large, la grille passe sur une seule colonne. Les éléments qui s'étendaient sur plusieurs colonnes reprennent une place normale. Désactivez ce comportement avec :responsive="false".

Une colonne sous 1000px

Réduisez la fenêtre

pour voir la différence

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

<template>
  <BeeGrid :columns="3">
    <BeeCard>Une colonne sous 1000px</BeeCard>
    <BeeCard>Réduisez la fenêtre</BeeCard>
    <BeeCard>pour voir la différence</BeeCard>
  </BeeGrid>
</template>

API

Props

Nom	Type	Défaut	Description
columns	number		Nombre de colonnes. Obligatoire.
gap	"none" | "sm" | "md" | "lg" | number	"lg"	Espacement. Un nombre est en pixels.
responsive	boolean	true	Une seule colonne sous 1000px.

Slots

Nom	Description
default	Éléments de la grille.

Variables CSS utilisées

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