GridContainer 栅格容器

GridContainer 组件需要配合 GridRow 及 GridColumn 组件使用。

示例

默认栅格

/demos/grid/default.vue

<template>
<article>
  <veui-grid-container>
    <veui-grid-row class="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 class="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 class="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>
article {
  padding: 10px 12px;
}

.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

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

在 GitHub 上编辑此示例编辑

<template>
<article>
  <veui-grid-container
    :columns="12"
    :gutter="10"
    :margin="0"
  >
    <veui-grid-row class="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 class="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 */
  padding: 10px 12px;
}

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

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

API

属性

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

插槽

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

全局配置

配置项	类型	默认值	描述
`gridcontainer.columns`	`number`	`12`	栅格列数。
`gridcontainer.gutter`	`number`	`30`	栅格列间距 `px` 数值。
`gridcontainer.margin`	`number`	`0`	栅格两侧边距 `px` 数值。

`veui-theme-dls` 中的默认配置

配置项	类型	默认值
`gridcontainer.columns`	`number`	`24`
`gridcontainer.gutter`	`number`	`20`
`gridcontainer.margin`	`number`	`20`

在 GitHub 上编辑此页面编辑

GridContainer 栅格容器

示例

默认栅格

定宽栅格

API

属性

插槽

全局配置

veui-theme-dls 中的默认配置

`veui-theme-dls` 中的默认配置