
<template>
    <div>
        <h-row>
            <h-col span="8" class="demo">123</h-col>
            <h-col span="8" class="demo">123</h-col>
            <h-col span="8" class="demo">123</h-col>
        </h-row>
        <h-row>
            <h-col span="4" class="demo">span: 4</h-col>
            <h-col span="10" offset="4" class="demo">offset: 4, span: 10</h-col>
        </h-row>
        <h-row>
            <h-col offset="12" span="12" class="demo">offset: 12, span: 12</h-col>
        </h-row>
        <h-row gutter="20">
            <h-col span="8"><div class="demo">span: 8</div></h-col>
            <h-col span="8"><div class="demo">span: 8</div></h-col>
            <h-col span="8"><div class="demo">span: 8</div></h-col>
        </h-row>
    </div>
</template>

<script>
import { hCol, hRow } from './index'
export default {
    name: "icon-demo",
    data() {
        return {
            type: 'primary',
            value: 2
        }
    },
    components: {
        hCol,
        hRow
    },
    methods: {
        aa() {
            console.log( '数字', this.value );
        }
    }
}
</script>
<style>
.demo {
    margin: 5px 0;
    height: 30px;
    background: #ccc;
}
</style>