vant/layout.md at d8b6ad7d543c599874b84148b5911889544a775e

mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [new feature] add i18n support

* feat: Extract demos from markdown

* feat: Base components demos

* [new feature] complete demo extract & translate

* [fix] text cases

* fix: add deepAssign test cases

* fix: changelog detail

* [new feature] AddressEdit support i18n

2017-11-15 20:08:51 -06:00

1.7 KiB

Raw Blame History

Layout

Quickly and easily create layouts with van-row and van-col

Install

import { Row, Col } from 'vant';

Vue.component(Row.name, Row);
Vue.component(Col.name, Col);

Usage

Basic Usage

Layout are based on 24-column. The attribute span in Col means the number of column the grid spans. Of course, You can use offset attribute to set number of spacing on the left side of the grid.

<van-row>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
</van-row>

<van-row>
  <van-col span="4">span: 4</van-col>
  <van-col span="10" offset="4">offset: 4, span: 10</van-col>
  <van-col span="6">span: 6</van-col>
</van-row>

<van-row>
  <van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>

Column Spacing

Set grid spacing using gutter attribute. The default value is 0

<van-row gutter="20">
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
</van-row>

API

Row

Attribute	Description	Type	Default	Accepted Values
gutter	grid spacing（px）	`String	Number`	-
prefix	className prefix	`String`	`van`	-

Column

Attribute	Description	Type	Default	Accepted Values
span	number of column the grid spans	`String	Number`	-
offset	number of spacing on the left side of the grid	`String	Number`	-
prefix	className prefix	`String`	`van`	-

1.7 KiB Raw Blame History Unescape Escape