Skip to content

grid

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

grid

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
test
test
 
 
README.md
README.md
 
 
README.zh-CN.md
README.zh-CN.md
 
 
index.js
index.js
 
 
index.less
index.less
 
 

README.md

Grid

Install

import { Grid, GridItem } from 'vant';

Vue.use(Grid).use(GridItem);

Usage

Basic Usage

<van-grid>
  <van-grid-item
    v-for="value in 4"
    :key="value"
    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>

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="https://www.baidu.com"
  />
</van-grid>

API

Grid Props

| Attribute | Description | Type | Default | |------|------|------|------|------| | column-num | Column Num | number | 4 | | gutter | Gutter | string | number | 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 |

GridItem Props

| Attribute | Description | Type | Default | |------|------|------|------|------| | text | Text | string | - | | icon | Icon name or URL | 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 Triggered when clicked event: Event

GridItem Slots

Name Description
default Custom content
icon Custom icon
text Custom text