Div 盒组件

盒组件是对基本元素 div 和 flex 流式布局的封装。

基础用法

通过标签 NueDiv 声明一个盒组件，默认的布局方向为水平。

排列间距 gap 默认为 1rem，可以通过属性 gap 自定义。

<template>
    <nue-div>
        <nue-button icon="plus-circle">新增</nue-button>
        <nue-button icon="filter">筛选</nue-button>
        <nue-button icon="refresh">刷新</nue-button>
    </nue-div>
</template>

垂直排列

通过属性 vertical 设置布局方向为垂直，具体应用为 flex-direction 为 column。

<template>
    <nue-div vertical>
        <nue-button icon="plus-circle">新增</nue-button>
        <nue-button icon="filter">筛选</nue-button>
        <nue-button icon="refresh">刷新</nue-button>
    </nue-div>
</template>

对齐方式

流式布局的对齐方式拥有主轴和副轴两个方向，具体应用到 CSS 的 justify-content 和 align-items 两个属性。

通过属性 justify 和 align 设置主轴和副轴的对齐方式，值类型同 CSS 属性值。

<template>
    <nue-div vertical>
        <nue-div align="center">
            <nue-button size="small">按钮</nue-button>
            <nue-button>按钮</nue-button>
        </nue-div>
        <nue-divider />
        <nue-div justify="space-between">
            <nue-button>按钮</nue-button>
            <nue-button>按钮</nue-button>
        </nue-div>
    </nue-div>
</template>

溢出控制

溢出断行

通过属性 wrap 设置是否在溢出时断行，具体应用到 CSS 的 flex-wrap，属性值类型同 CSS 属性值，默认不换行。

<template>
    <nue-div vertical>
        <nue-div wrap="wrap">
            <nue-button v-for="i in 12" :key="i">按钮</nue-button>
        </nue-div>
        <nue-divider />
        <nue-div wrap="wrap-reverse">
            <nue-button v-for="i in 12" :key="i">按钮</nue-button>
        </nue-div>
    </nue-div>
</template>

溢出隐藏或滚动

通过属性 overflow 设置溢出时的处理方式，值类型为 CSS overflow 属性值，默认值为 hidden。

<template>
    <nue-div vertical>
        <nue-div overflow="auto">
            <nue-button v-for="i in 12" :key="i">按钮</nue-button>
        </nue-div>
        <nue-divider />
        <nue-div overflow="hidden">
            <nue-button v-for="i in 12" :key="i">按钮</nue-button>
        </nue-div>
        <nue-divider />
        <nue-div overflow="visible">
            <nue-button v-for="i in 12" :key="i">按钮</nue-button>
        </nue-div>
    </nue-div>
</template>