Components
Bento
The bento lattice: a grid of unequal tiles that reads as one plate. The container owns the track count; each cell claims its own span.
#Basic usage
Wide
A tile that claims two tracks
Tall? No — square
One track of measure
Compact
One track
Compact
One track
<script setup lang="ts">
import { Bento, Card } from "@bysages/vue";
const tiles = [
{ span: 2, title: "Wide", note: "A tile that claims two tracks" },
{ span: 1, title: "Tall? No — square", note: "One track of measure" },
{ span: 1, title: "Compact", note: "One track" },
{ span: 1, title: "Compact", note: "One track" },
];
</script>
<template>
<Bento class="w-full">
<Bento.Cell v-for="(tile, i) in tiles" :key="`${tile.title}-${i}`" :span="tile.span">
<Card class="h-full p-4">
<h3 class="m-0 text-sm font-medium">{{ tile.title }}</h3>
<p class="mb-0 mt-1 text-xs text-tertiary">{{ tile.note }}</p>
</Card>
</Bento.Cell>
</Bento>
</template>
#Props
#SBentoRoot
The bento lattice: a grid of unequal tiles that reads as one plate. The container owns the track count; each cell claims its own span.
| Prop | Type | Default | Description |
|---|---|---|---|
columns | Number | 3 | — |
#SBentoCell
One tile: span claims columns, rowSpan claims rows — the rest
of the plate stays in measure.
| Prop | Type | Default | Description |
|---|---|---|---|
span | Number | 1 | — |
rowSpan | Number | 1 | — |