FlexDiv 弹性盒

使用 Flex 布局方式的弹性盒组件。

基础用法

使用 NueDiv 包裹使用。

默认的布局方向 flex-direction 为 row。

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

垂直排列

通过属性 vertical 设置布局方向 flex-direction 为 column。属性接收 boolean 类型。

<template>
    <nue-div vertical>
        <nue-text>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </nue-text>
        <nue-text>
            Id hic ex soluta laboriosam blanditiis repudiandae nesciunt,
        </nue-text>
        <nue-text>
            aliquid obcaecati aspernatur illum alias nisi quod placeat modi
            optio nemo rem pariatur reiciendis.
        </nue-text>
    </nue-div>
</template>

设置元素对齐方式

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

通过 justify 和 align 属性设置主轴和副轴的对齐方式。它们的值类型都为 string，可选值与 CSS 一致。

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

断行

通过 wrap 属性设置是否断行，具体应用到 CSS 的 flex-wrap 样式。

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

设置元素分隔符

通过 divider 属性设置元素之间的分隔符。

divider 属性接收 string、number 类型。

<template>
    <nue-div vertical>
        <nue-div align="center" divider="|">
            <nue-button>按钮</nue-button>
            <nue-button>按钮</nue-button>
            <nue-button>按钮</nue-button>
        </nue-div>
        <nue-div :divider="123" align="center">
            <nue-button>按钮</nue-button>
            <nue-button>按钮</nue-button>
            <nue-button>按钮</nue-button>
        </nue-div>
    </nue-div>
</template>