NueUI

Appearance

Container 布局容器 ​

用于快速搭建页面布局。

布局组件基础 ​

布局组件通常用于规划站点页面或者是某个独立区域的布局，这些布局通常包含头部、主体、侧栏以及底部等区域。

我们针对这些区域创建了布局组件，包含容器组件 NueContainer 以及一系列构成组件。构成组件包含头部组件 NueHeader、主体组件 NueMain、主体内容组件 NueContent、侧栏组件 NueAside、底部组件 NueFooter 以及可以用于拖拽改变元素宽度的 NueSeparator 组件（通常用于调整侧栏组件的宽度）。

容器组件 ​

容器组件 NueContainer 用于承载所有构成组件。

容器组件以及构成组件都采用了 flex 流式布局，默认情况下，容器组件的布局方向为垂直，即 flex-direction: column。

容器组件的默认宽度和高度都是占满父容器，也就是 100%。通过属性 width 和 height 可以修改宽高默认值，接受 CSS 宽高属性值。也通过 theme 属性应用主题样式达到同样的效果。

<template>
    <nue-container height="512px">
        <nue-header>头部</nue-header>
        <nue-main>
            <nue-aside>左侧栏</nue-aside>
            <nue-content fill>
                <nue-div style="padding: 1rem">主体</nue-div>
            </nue-content>
            <nue-aside>右侧栏</nue-aside>
        </nue-main>
        <nue-footer>底部</nue-footer>
    </nue-container>
</template>

<style scoped>
.nue-header,
.nue-main,
.nue-footer {
    color: var(--nue-primary-text-color);
    background-color: var(--nue-primary-color-100);
}
</style>

头部组件和底部组件 ​

头部组件 NueHeader 和底部组件 NueFooter 的设计相似，默认布局方向为横向，且元素居中排列。

头部组件的默认高度为 4rem；底部组件的默认高度为 3rem。通过属性 width 和 height 可以修改宽高默认值，接受 CSS 宽高属性值。

<template>
    <nue-container>
        <nue-header>
            <nue-div flex="1" style="font-size: 0.875rem">
                <nue-link href="#" theme="actived">首页</nue-link>
                <nue-link href="#">关于我们</nue-link>
            </nue-div>
            <nue-text size="md">LOGO</nue-text>
            <nue-div flex="1" gap=".25rem" justify="end">
                <nue-avatar icon="theme" />
            </nue-div>
        </nue-header>
    </nue-container>
</template>

<style scoped>
.nue-header,
.nue-main,
.nue-footer {
    color: var(--nue-primary-text-color);
    background-color: var(--nue-primary-color-100);
}
</style>

<template>
    <nue-container>
        <nue-footer>
            <nue-div justify="center">
                <nue-text size="sm">NueUI - 2025 - 京 ICP 备 xxxxxxxxx 号</nue-text>
            </nue-div>
        </nue-footer>
    </nue-container>
</template>

<style scoped>
.nue-header,
.nue-main,
.nue-footer {
    color: var(--nue-primary-text-color);
    background-color: var(--nue-primary-color-100);
}
</style>

主体组件 ​

主体组件 NueMain 用于承载内容组件 NueContent 以及一个或多个侧栏组件 NueAside 。

主体组件的默认布局方向为横向，宽高默认占满容器组件的剩余空间。不支持通过属性 width 和 height 直接修改宽高，但可以通过容器组件的 theme 属性进行修改。

<template>
    <nue-container height="512px">
        <nue-main>
            <nue-aside>左侧栏</nue-aside>
            <nue-content fill>
                <nue-div style="padding: 1rem">主体</nue-div>
            </nue-content>
            <nue-aside>右侧栏</nue-aside>
        </nue-main>
    </nue-container>
</template>

<style scoped>
.nue-header,
.nue-main,
.nue-footer {
    color: var(--nue-primary-text-color);
    background-color: var(--nue-primary-color-100);
}
</style>

侧栏组件 ​

侧栏组件 NueAside 通常用于承载路由链接、菜单等元素，默认的布局方向为垂直，默认高度为占满父元素；宽度为 16rem。

侧栏组件在设计时考虑到宽度可变性，因此侧栏组件拥有 width、min-width 以及 max-width 三个属性，分别对应起始宽度、最小宽度以及最大宽度。通过拖拽变宽组件 NueSeparator 实现侧栏宽度变化，最小宽度和最大宽度可以限定宽度变化范围。

<template>
    <nue-container height="512px">
        <nue-main>
            <nue-aside max-width="32%" min-width="16%" width="24%">左侧栏</nue-aside>
            <nue-separator op-target="previous" />
            <nue-content fill>
                <nue-div style="padding: 1rem">主体</nue-div>
            </nue-content>
            <nue-separator op-target="next" />
            <nue-aside max-width="32%" min-width="16%" width="24%">右侧栏</nue-aside>
        </nue-main>
    </nue-container>
</template>

<style scoped>
.nue-header,
.nue-main,
.nue-footer {
    color: var(--nue-primary-text-color);
    background-color: var(--nue-primary-color-100);
}
</style>

拖拽变宽组件 ​

拖拽变宽组件 NueSeparator 用于实现目标元素宽度（通常为侧栏组件）的动态变化。 该组件的展示形式为一个垂直线，通过点击这条垂直线，可以拖拽改变侧栏宽度。拖拽变宽组件的默认宽度为 1px ，默认高度为占满父元素。

通过属性 op-target 指定拖拽变宽时操作的元素，可选值为 'previous' | 'next' | HTMLElement，默认为 previous。

通过属性 disabled 禁用拖拽变宽功能。

<template>
    <nue-container height="512px">
        <nue-main>
            <nue-aside max-width="32%" min-width="16%" width="24%">左侧栏</nue-aside>
            <nue-separator :disabled="disabled" op-target="previous" />
            <nue-content fill>
                <nue-div style="padding: 1rem">
                    <nue-button theme="small" @click="disabled = !disabled">
                        {{ disabled ? '启用' : '禁用' }}拖拽变宽
                    </nue-button>
                </nue-div>
            </nue-content>
        </nue-main>
    </nue-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const disabled = ref(false);
</script>

<style scoped>
.nue-header,
.nue-main,
.nue-footer {
    color: var(--nue-primary-text-color);
    background-color: var(--nue-primary-color-100);
}
</style>

容器嵌套 ​

容器组件 NueContainer 默认支持一套嵌套布局，通过主题 nested、nested_aside 以及 nested_main 搭配使用。需要分别应用于包裹容器、侧栏容器以及主体容器。

其中侧栏容器的默认宽度为 24%、最小宽度为 16%、最大宽度为 32%，能够通过拖拽变宽组件调整宽度。

<template>
    <nue-container theme="nested">
        <nue-container theme="nested__aside">
            <nue-header>头部</nue-header>
            <nue-main>
                <nue-div style="padding: 1rem">侧边栏</nue-div>
            </nue-main>
        </nue-container>
        <nue-separator op-target="previous" />
        <nue-container theme="nested__main">
            <nue-header>头部</nue-header>
            <nue-main>
                <nue-content fill>
                    <nue-div style="padding: 1rem">主体</nue-div>
                </nue-content>
            </nue-main>
            <nue-footer>底部</nue-footer>
        </nue-container>
    </nue-container>
</template>

<style scoped>
.nue-header,
.nue-main,
.nue-footer {
    color: var(--nue-primary-text-color);
    background-color: var(--nue-primary-color-100);
}
</style>

注意事项 ​

  1. Flex 布局：所有布局组件都采用 Flex 布局，了解 Flex 布局有助于更好地使用这些组件。
  2. 宽高设置：
    • NueContainer 支持通过 width 和 height 设置宽高
    • NueHeader 和 NueFooter 支持设置宽高
    • NueMain 不支持直接设置宽高，通过父容器控制
    • NueAside 支持 width、minWidth、maxWidth 控制宽度范围
  3. 拖拽调整：NueSeparator 组件需要与 NueAside 配合使用，通过 opTarget 属性指定操作目标。
  4. 嵌套布局：使用 nested 系列主题时，需要为不同容器应用不同的主题类。

组件属性与事件 ​

下方涵盖了布局容器组件所有的可用属性与事件。

NueContainer 属性 ​

属性类型默认值说明
heightstring-容器高度
widthstring-容器宽度
themestring | string[] | Record<string, boolean>-主题样式（继承自 GlobalProps）

NueHeader 属性 ​

属性类型默认值说明
widthstring-宽度
heightstring-高度
themestring | string[] | Record<string, boolean>-主题样式（继承自 GlobalProps）

NueMain 属性 ​

属性Type默认值说明
responsiveboolean-是否响应式
themestring | string[] | Record<string, boolean>-主题样式（继承自 GlobalProps）

NueAside 属性 ​

属性Type默认值说明
widthstring-宽度
minWidthstring-最小宽度
maxWidthstring-最大宽度
collapsedWidthstring-折叠宽度
themestring | string[] | Record<string, boolean>-主题样式（继承自 GlobalProps）

NueContent 属性 ​

属性Type默认值说明
pureboolean-是否纯净模式
fillboolean-是否填充
themestring | string[] | Record<string, boolean>-主题样式（继承自 GlobalProps）

NueSeparator 属性 ​

属性Type默认值说明
opTarget'previous' | 'next' | HTMLElement-操作目标
disabledboolean-是否禁用
themestring | string[] | Record<string, boolean>-主题样式（继承自 GlobalProps）

NueSeparator 事件 ​

事件参数说明
resizewidth: number调整宽度事件

NueFooter 属性 ​

属性Type默认值说明
widthstring-宽度
heightstring-高度
themestring | string[] | Record<string, boolean>-主题样式（继承自 GlobalProps）

Released under the MIT License.

Copyright © 2026-present Nathan Lee