GridContainer 栅格容器

示例

默认栅格

/demos/grid/default.vue
8/24
16/24
6/24
6/24
6/24
6/24
12/24
12/24
在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-grid-container>
    <veui-grid-row>
      <veui-grid-column :span="8">
        <div class="content">
          8/24
        </div>
      </veui-grid-column>
      <veui-grid-column :span="16">
        <div class="content">
          16/24
        </div>
      </veui-grid-column>
    </veui-grid-row>
    <veui-grid-row>
      <veui-grid-column :span="6">
        <div class="content">
          6/24
        </div>
      </veui-grid-column>
      <veui-grid-column :span="6">
        <div class="content">
          6/24
        </div>
      </veui-grid-column>
      <veui-grid-column :span="6">
        <div class="content">
          6/24
        </div>
      </veui-grid-column>
      <veui-grid-column :span="6">
        <div class="content">
          6/24
        </div>
      </veui-grid-column>
    </veui-grid-row>
    <veui-grid-row>
      <veui-grid-column :span="12">
        <div class="content">
          12/24
        </div>
      </veui-grid-column>
      <veui-grid-column :span="12">
        <div class="content">
          12/24
        </div>
      </veui-grid-column>
    </veui-grid-row>
  </veui-grid-container>
</article>
</template>

<script>
import { GridContainer, GridRow, GridColumn } from 'veui'

export default {
  components: {
    'veui-grid-container': GridContainer,
    'veui-grid-row': GridRow,
    'veui-grid-column': GridColumn
  }
}
</script>

<style lang="less" scoped>
.veui-grid-row {
  & + & {
    margin: 2px 0; /* Just for showcase */
  }
}

.content {
  background-color: #eee;
  height: 100%;
  line-height: 60px;
  border-radius: 2px;
  text-align: center;
}
</style>

定宽栅格

/demos/grid/fixed.vue
3/12
9/12
4/12
4/12
4/12

可以在 GridContainer 上使用 columns / margin / gutter 调整布局参数。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-grid-container
    :columns="12"
    :gutter="10"
    :margin="0"
  >
    <veui-grid-row>
      <veui-grid-column :span="3">
        <div class="content">
          3/12
        </div>
      </veui-grid-column>
      <veui-grid-column :span="9">
        <div class="content">
          9/12
        </div>
      </veui-grid-column>
    </veui-grid-row>
    <veui-grid-row>
      <veui-grid-column :span="4">
        <div class="content">
          4/12
        </div>
      </veui-grid-column>
      <veui-grid-column :span="4">
        <div class="content">
          4/12
        </div>
      </veui-grid-column>
      <veui-grid-column :span="4">
        <div class="content">
          4/12
        </div>
      </veui-grid-column>
    </veui-grid-row>
  </veui-grid-container>
</article>
</template>

<script>
import { GridContainer, GridRow, GridColumn } from 'veui'

export default {
  components: {
    'veui-grid-container': GridContainer,
    'veui-grid-row': GridRow,
    'veui-grid-column': GridColumn
  }
}
</script>

<style lang="less" scoped>
article {
  width: 400px; /* Fixed-width container */
}

.veui-grid-row {
  & + & {
    margin: 2px 0; /* Just for showcase */
  }
}

.content {
  background-color: #eee;
  height: 100%;
  line-height: 60px;
  border-radius: 2px;
  text-align: center;
}
</style>

API

属性

名称类型默认值描述
columnsnumber=gridcontainer.columns栅格列数。
marginnumber=gridcontainer.margin栅格两侧边距 px 数值。
gutternumber=gridcontainer.gutter栅格列间距 px 数值。
widthnumber=-当需要创建定宽布局时，用来传入容器宽度 px 数值。

插槽

名称描述
default布局内容，直接子组件只能包含 GridRow 组件。

全局配置

配置项类型默认值描述
gridcontainer.columnsnumber12栅格列数。
gridcontainer.gutternumber30栅格列间距 px 数值。
gridcontainer.marginnumber0栅格两侧边距 px 数值。

veui-theme-dls 中的默认配置

配置项类型默认值
gridcontainer.columnsnumber24
gridcontainer.gutternumber20
gridcontainer.marginnumber20
在 GitHub 上编辑此页编辑