next UI

# Grid宫格

# 概述

宫格组件（Grid）与 24 列栅格布局不同的是，栅格组件（Row、Col）可以自定义一行内的列数，及各列所占比例，宫格组件则是将每行等分为宽度相等的列，甚至可以将单元格设置为正方形，并支持动态适应屏幕，就像九宫格一样。

# 代码示例

基础用法
宫格共包含两个组件：Grid 和 GridItem。
设置 Grid 属性 col 可以指定最大支持的列数。
1
2
3
4
5
6
7
8
<template>
    <Grid :col="4">
        <GridItem>1</GridItem>
        <GridItem>2</GridItem>
        <GridItem>3</GridItem>
        <GridItem>4</GridItem>
        <GridItem>5</GridItem>
        <GridItem>6</GridItem>
        <GridItem>7</GridItem>
        <GridItem>8</GridItem>
    </Grid>
</template>
<script>
    export default {

    }
</script>
Expand Copy
宽高一致
设置属性 square 为 true，宫格的高度会与宽度一致，并会自动适应窗口的改变。
调整窗口宽度的改变使用了节流函数。
1
2
3
4
5
6
<template>
    <Grid square>
        <GridItem>1</GridItem>
        <GridItem>2</GridItem>
        <GridItem>3</GridItem>
        <GridItem>4</GridItem>
        <GridItem>5</GridItem>
        <GridItem>6</GridItem>
    </Grid>
</template>
<script>
    export default {

    }
</script>
Expand Copy
内容垂直居中
设置属性 center 为 true，宫格的内容将垂直居中显示。
该设置需要 GridItem 具有高度，比如开启宽高一致属性 square。
1
2
3
<template>
    <Grid center square>
        <GridItem>1</GridItem>
        <GridItem>2</GridItem>
        <GridItem>3</GridItem>
    </Grid>
</template>
<script>
    export default {

    }
</script>
Expand Copy
是否显示边框
设置属性 border 可以控制是否显示边框，默认为显示（true）。
显示边框：
1
2
3
4
5
6
<template>
    <div>
        显示边框：<i-switch v-model="border" />
        <Grid :border="border">
            <GridItem>1</GridItem>
            <GridItem>2</GridItem>
            <GridItem>3</GridItem>
            <GridItem>4</GridItem>
            <GridItem>5</GridItem>
            <GridItem>6</GridItem>
        </Grid>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                border: true
            }
        }
    }
</script>
Expand Copy
悬停效果
设置属性 hover 为 true 可以开启鼠标悬停时的效果，会有一个浮起的阴影。
显示边框： 开启悬停：
1
2
3
4
5
6
7
8
9
<template>
    <div>
        显示边框：<i-switch v-model="border" />
        开启悬停：<i-switch v-model="hover" />
        <Grid :border="border" :hover="hover">
            <GridItem>1</GridItem>
            <GridItem>2</GridItem>
            <GridItem>3</GridItem>
            <GridItem>4</GridItem>
            <GridItem>5</GridItem>
            <GridItem>6</GridItem>
            <GridItem>7</GridItem>
            <GridItem>8</GridItem>
            <GridItem>9</GridItem>
        </Grid>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                border: true,
                hover: true
            }
        }
    }
</script>
Expand Copy

# API

# Button props

属性 说明 类型 默认值
col 最大支持的列数 Number 3
square 是否宽高一致 Boolean false
padding 内容的间距 String 24px
center 内容是否垂直居中，GridItem 需有高度 Boolean false
border 是否显示边框 Boolean true
hover 是否开启鼠标悬停效果 Boolean false

← 描述列表 →