vant/src/grid

Grid

Intro

Used to divide the page into blocks of equal width in the horizontal direction for displaying content or page navigation.

Install

Register component globally via app.use, refer to Component Registration for more registration ways。

import { createApp } from 'vue';
import { Grid, GridItem } from 'vant';

const app = createApp();
app.use(Grid);
app.use(GridItem);

Usage

Basic Usage

<van-grid>
  <van-grid-item icon="photo-o" text="Text" />
  <van-grid-item icon="photo-o" text="Text" />
  <van-grid-item icon="photo-o" text="Text" />
  <van-grid-item icon="photo-o" text="Text" />
</van-grid>

Column Num

<van-grid :column-num="3">
  <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="Text" />
</van-grid>

Custom Content

<van-grid :border="false" :column-num="3">
  <van-grid-item>
    <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
  </van-grid-item>
  <van-grid-item>
    <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
  </van-grid-item>
  <van-grid-item>
    <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
  </van-grid-item>
</van-grid>

Square

<van-grid square>
  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />
</van-grid>

Gutter

<van-grid :gutter="10">
  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />
</van-grid>

Horizontal

<van-grid direction="horizontal" :column-num="2">
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid>

Route

<van-grid clickable :column-num="2">
  <van-grid-item icon="home-o" text="Vue Router" to="/" />
  <van-grid-item icon="search" text="URL" url="/vant/mobile.html" />
</van-grid>

Show Badge

<van-grid :column-num="2">
  <van-grid-item icon="home-o" text="Text" dot />
  <van-grid-item icon="search" text="Text" badge="99+" />
</van-grid>

API

Grid Props

Attribute	Description	Type	Default
column-num	Column Num	number | string	4
icon-size	Icon size	number | string	28px
gutter	Gutter	number | string	0
border	Whether to show border	boolean	true
center	Whether to center content	boolean	true
square	Whether to be square shape	boolean	false
clickable	Whether to show click feedback when clicked	boolean	false
direction	Content arrangement direction, can be set to horizontal	string	vertical

GridItem Props

Attribute	Description	Type	Default
text	Text	string	-
icon	Icon name or URL	string	-
icon-prefix	Icon className prefix	string	van-icon
dot	Whether to show red dot	boolean	false
badge	Content of the badge	number | string	-
url	Link URL	string	-
to	Target route of the link, same as to of vue-router	string | object	-
replace	If true, the navigation will not leave a history record	boolean	false

GridItem Events

Event	Description	Arguments
click	Emitted when component is clicked	event: MouseEvent

GridItem Slots

Name	Description
default	Custom content
icon	Custom icon
text	Custom text

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@grid-item-content-padding	@padding-md @padding-xs	-
@grid-item-content-background-color	@white	-
@grid-item-content-active-color	@active-color	-
@grid-item-icon-size	28px	-
@grid-item-text-color	@gray-7	-
@grid-item-text-font-size	@font-size-sm	-