Div 盒组件

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

基础用法

通过标签 NueDiv 声明一个盒组件。

盒组件默认的布局方向为水平，排列间距为 1rem。

<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 wrap>
        <nue-button v-for="i in 10" :key="i">按钮</nue-button>
    </nue-div>
</template>