gd-ui-vite

Layout布局

基础布局

使用单一分栏创建基础的栅格布局

123
456
789
123
456
789
abc
通过使用GRow和GCol组件，并使用GCol组件的span属性，我们可以自由组合布局
<template>
  <section>
    <GRow>
      <GCol></GCol>
    </GRow>
    <GRow>
      <GCol :span="8">123</GCol>
      <GCol :span="8">456</GCol>
      <GCol :span="8">789</GCol>
    </GRow>
    <GRow>
      <GCol :span="6">123</GCol>
      <GCol :span="6">456</GCol>
      <GCol :span="6">789</GCol>
      <GCol :span="6">abc</GCol>
    </GRow>
  </section>
</template>

分栏间隔

分栏之间存在间隔

123
456
789
GRow提供gutter属性来指定分栏之间的间隔大小
<template>
  <section>
    <GRow :gutter="6">
      <GCol :span="8">123</GCol>
      <GCol :span="8">456</GCol>
      <GCol :span="8">789</GCol>
    </GRow>
  </section>
</template>

对齐方式

通过flex布局对分栏进行灵活对齐

123
456
123
456
123
456
123
456
123
456
GRow提供justify属性来指定分栏的排版方式
<template>
  <section>
    <GRow :gutter="16">
      <GCol :span="8">123</GCol>
      <GCol :span="8">456</GCol>
    </GRow>
    <GRow :gutter="16" justify="end">
      <GCol :span="8">123</GCol>
      <GCol :span="8">456</GCol>
    </GRow>
    <GRow :gutter="16" justify="center">
      <GCol :span="8">123</GCol>
      <GCol :span="8">456</GCol>
    </GRow>
    <GRow :gutter="16" justify="between">
      <GCol :span="8">123</GCol>
      <GCol :span="8">456</GCol>
    </GRow>
    <GRow :gutter="16" justify="around">
      <GCol :span="8">123</GCol>
      <GCol :span="8">456</GCol>
    </GRow>
  </section>
</template>

API

GRow API

参数说明类型可选值默认值
gutter栅格间隔number————0
justify对齐方式stringstart/end/center/between/aroundstart

GCol API

参数说明类型可选值默认值
span栅格占据的列数number————24