---
url: /components/bento.md
---
# Bento 图文组合分区

`EvBento` 是产品特性页的 Bento 卡片栅格：一张网格里混合大小卡片，每张卡图文组合——
标题、描述与产品图自动排版。卡片用 `span` 跨列、`rows` 跨行，`dense` 可自动回填空隙；
超出列数或窄屏时自动回落为整行，无需手工干预。

卡片默认无边框纯色面，`bordered` 可加边框；`tone` 提供 `soft` 淡底、`primary`
主色、`dark` 深色卡面。

## 基础用法

```vue
<EvBento
  :columns="3"
  :items="[
    { eyebrow: '影像', title: '一亿像素主摄', image: '/a.jpg', span: 2 },
    { title: '全身只有 6.9mm', desc: '轻薄与坚固兼得' },
    { title: '双频卫星通信', tone: 'dark' },
  ]"
/>
```

## 铺满图与整行卡

```vue
<EvBento
  :columns="3"
  :items="[
    { title: '铺图卡', image: '/a.jpg', imagePos: 'fill', tone: 'dark', rows: 2 },
    { title: '跨列卡', span: 2, tone: 'primary' },
  ]"
/>
```

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| items | 卡片数据，见下 | array | `[]` |
| columns | 列数 | number | `3` |
| bordered | 卡片加边框 | boolean | `false` |
| dense | 自动回填跨列留下的空隙 | boolean | `false` |
| gap | 卡片间距 | number / string | `16` |

**items 字段**：

| 字段 | 说明 | 类型 |
| --- | --- | --- |
| eyebrow | 卡顶小眉题 | string |
| title / desc | 标题与描述 | string |
| image | 图片地址 | string |
| imagePos | 图位置：`bottom` / `top` / `fill`（整卡铺图，文字叠上） | string |
| span | 跨列数（超出列数自动回落为整行） | number |
| rows | 跨行数 | number |
| tone | 卡面：`plain` / `soft` / `primary` / `dark` | string |
| href | 卡片链接（渲染为整卡可点） | string |

### 插槽

| 插槽 | 说明 | 参数 |
| --- | --- | --- |
| item | 接管卡片内容 | `{ item, index }` |

### CSS 变量

| 变量 | 说明 |
| --- | --- |
| `--ev-bento-columns` | 列数 |
| `--ev-bento-gap` | 卡片间距 |

布局断点跟随**父容器宽度**（容器查询）而非视口：嵌在窄栏、侧栏里也会正确回落为
整行，宽屏多列、窄容器单列，不需要宿主写任何媒体查询。