Layout

Demo

Layout 跨端示例与演示

H5 LiveInteractive browser runtime

Business overviewThis week

Revenue¥86,420+12.8%

Orders128

Visitors2,846

Conversion4.5%

Refunds6

Basic Usage

<template>
  <VRow>
    <VCol :span="8">
      span 8
    </VCol>
    <VCol :span="8">
      span 8
    </VCol>
    <VCol :span="8">
      span 8
    </VCol>
  </VRow>
</template>

Gutter

<template>
  <VRow :gutter="[8, 12]">
    <VCol :span="12">
      span 12
    </VCol>
    <VCol :span="12">
      span 12
    </VCol>
  </VRow>
</template>

Offset and Alignment

<template>
  <VRow justify="space-between">
    <VCol :span="6">
      left
    </VCol>
    <VCol :span="6">
      right
    </VCol>
  </VRow>

  <VRow>
    <VCol :span="10" :offset="2">
      offset 2
    </VCol>
  </VRow>
</template>

Row Props

Prop	Type	Default	Description
gutter	number | string | [number | string, number | string]	undefined	Grid gutter
justify	'start' | 'end' | 'center' | 'space-around' | 'space-between'	'start'	Main-axis alignment
align	'top' | 'middle' | 'bottom' | 'stretch'	'top'	Cross-axis alignment
wrap	boolean	true	Whether to wrap

Col Props

Prop	Type	Default	Description
span	number | string	24	Column span
offset	number | string	0	Left offset