Fes Design

Layout 布局 ​

  • Layout：布局容器，其下可嵌套 Header、Aside、Main、Footer 或 Layout 本身，可以放在任何父容器中。Layout默认是水平布局，当包含Header或者Footer时变为垂直布局。
  • Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
  • Aside：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
  • Main：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
  • Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

组件注册 ​

js
import { FLayout } from '@fesjs/fes-design';

app.use(FLayout);

代码演示 ​

基础用法 ​

play
<template>
    <f-layout>
        <f-header />
        <f-main />
        <f-footer />
    </f-layout>

    <f-layout style="margin-top: 20px">
        <f-header />
        <f-layout>
            <f-aside />
            <f-main />
        </f-layout>
        <f-footer />
    </f-layout>

    <f-layout style="margin-top: 20px">
        <f-aside />
        <f-layout>
            <f-header />
            <f-main />
            <f-footer />
        </f-layout>
    </f-layout>
</template>

<style scoped>
.fes-layout-header,
.fes-layout-footer {
    background: rgba(128, 128, 128, 0.2);
}

.fes-layout-footer {
    padding: 24px;
}

.fes-layout-aside {
    background: rgba(128, 128, 128, 0.3);
}

.fes-layout-main {
    padding: 24px;
    background: rgba(128, 128, 128, 0.4);
}
</style>

嵌入效果 ​

play
<template>
    <f-layout embedded>
        <f-main class="demo-main-wrapper">
            <div class="demo-main-page">Main</div>
        </f-main>
    </f-layout>
</template>

<style scoped>
.demo-main-wrapper {
    padding: 24px;
}
.demo-main-page {
    padding: 16px;
    background: #ffffff;
}
</style>

使用边框 ​

aside、footer、header 可以设定 bordered。

play
<template>
    <f-layout>
        <f-aside bordered> Aside </f-aside>
        <f-layout>
            <f-header bordered> Header </f-header>
            <f-main> Main </f-main>
            <f-footer bordered> Footer </f-footer>
        </f-layout>
    </f-layout>
</template>

<style scoped></style>

绝对定位 ​

除了Main组件之外其他布局组件可以使用绝对定位。如果你期望内容在固定的区域内滚动，可以使用 fixed 模式。

play
<template>
    <f-layout style="height: 400px">
        <f-header bordered fixed> Header </f-header>
        <f-layout fixed style="top: 54px; bottom: 70px">
            <f-aside> Aside </f-aside>
            <f-main>
                <f-table :data="data">
                    <f-table-column
                        prop="date"
                        label="日期"
                        :width="150"
                        ellipsis
                        fixed
                    />
                    <f-table-column
                        prop="name"
                        label="姓名"
                        :width="150"
                    />
                    <f-table-column
                        prop="province"
                        label="省份"
                        :width="150"
                    />
                    <f-table-column prop="city" label="市区" :width="150" />
                    <f-table-column
                        prop="address"
                        label="地址"
                        :width="800"
                    />
                    <f-table-column prop="zip" label="邮编" :width="120" />
                    <f-table-column
                        label="操作"
                        align="center"
                        :width="200"
                        :action="action"
                        fixed="right"
                    />
                </f-table>
            </f-main>
        </f-layout>
        <f-footer fixed bordered class="demo-tal">
            We Design ©2018 Created by MumbleFE
        </f-footer>
    </f-layout>
</template>

<script>
import { reactive } from 'vue';

export default {
    setup() {
        const data = reactive(
            Array.from([1, 2, 3], (i) => {
                return {
                    date: `2016-05-2016-05-2016-05-2016-05-2016-05-2016-05-2016-05-2016-05-${
                        i < 10 ? `0${i}` : i
                    }`,
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                };
            }),
        );
        const action = [
            {
                label: '编辑',
                func: (row) => {
                    console.log('[layout.fixed] [action.编辑] row:', row);
                },
            },
            {
                label: '删除',
                func: (row) => {
                    console.log('[layout.fixed] [action.删除] row:', row);
                },
            },
        ];
        return {
            data,
            action,
        };
    },
};
</script>

<style scoped>
.fes-layout-main {
    min-height: 500px;
    padding: 24px;
}
.fes-layout-footer {
    text-align: center;
    padding: 16px;
}
</style>

侧边栏布局 ​

play
<template>
    <f-layout style="height: 400px">
        <f-aside v-model:collapsed="collapsed" inverted fixed collapsible>
            <div style="height: 800px" />
        </f-aside>
        <f-layout fixed :style="{ left: collapsed ? '48px' : '200px' }">
            <f-header bordered fixed> Header </f-header>
            <f-layout embedded fixed style="top: 54px">
                <f-main>
                    <div class="main-page">Main</div>
                </f-main>
                <f-footer> We Design ©2018 Created by MumbleFE </f-footer>
            </f-layout>
        </f-layout>
    </f-layout>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const collapsed = ref(false);
        return {
            collapsed,
        };
    },
};
</script>

<style scoped>
.fes-layout-main {
    padding: 24px 24px 0;
}
.main-page {
    background: #ffffff;
    min-height: 500px;
    padding: 24px;
}
.fes-layout-footer {
    padding: 16px;
    text-align: center;
}
</style>

头部布局 ​

play
<template>
    <f-layout style="height: 400px">
        <f-header inverted bordered fixed> Header </f-header>
        <f-layout embedded fixed style="top: 54px">
            <f-main>
                <div class="main-page">Main</div>
            </f-main>
            <f-footer> We Design ©2018 Created by MumbleFE </f-footer>
        </f-layout>
    </f-layout>
</template>

<style scoped>
.fes-layout-main {
    padding: 24px 24px 0;
}
.main-page {
    background: #ffffff;
    min-height: 500px;
    padding: 24px;
}
.fes-layout-footer {
    padding: 16px;
    text-align: center;
}
</style>

混合布局 ​

play
<template>
    <f-layout style="height: 400px">
        <f-header inverted bordered fixed> Header </f-header>
        <f-layout fixed style="top: 54px">
            <f-aside> Aside </f-aside>
            <f-layout embedded>
                <f-main>
                    <div class="main-page">Main</div>
                </f-main>
                <f-footer> We Design ©2018 Created by MumbleFE </f-footer>
            </f-layout>
        </f-layout>
    </f-layout>
</template>

<style scoped>
.fes-layout-main {
    padding: 24px 24px 0;
}
.main-page {
    background: #ffffff;
    min-height: 500px;
    padding: 24px;
}
.fes-layout-footer {
    padding: 16px;
    text-align: center;
}
</style>

Layout Props ​

属性说明类型默认值
embedded使用更深的背景色展现嵌入效果booleanfalse
fixedfixed 模式将会把 CSS position 设为 absolute，还将 left、right、top、bottom 设为 0。absolute 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示booleanfalse
containerClass可滚动内容节点的类array/object/style-
containerStyle可滚动内容节点的样式object-

Header Props ​

属性说明类型默认值
fixedfixed 模式将会把 CSS position 设为 absolute，还将 left、right、top 设为 0。absolute 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示booleanfalse
bordered是否添加边框booleanfalse
inverted是否使用深色booleanfalse

Aside Props ​

属性说明类型默认值
collapsible侧边栏是否能够折叠booleanfalse
collapsed(v-model)侧边栏是否折叠boolean-
collapsedWidth侧边栏折叠后的宽度string64px
fixed是否固定住侧边栏，当固定时 position 为 fixed，当Container区域滚动时，不会跟随滚动booleanfalse
width侧边栏宽度string200px
showTrigger是否显示默认的折叠按钮booleantrue
bordered是否添加边框booleanfalse
inverted是否使用深色booleanfalse
fixedfixed 模式将会把 CSS position 设为 absolute，还将 left、bottom、top 设为 0。absolute 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示booleanfalse

Main Props ​

属性说明类型默认值
embedded使用更深的背景色展现嵌入效果booleanfalse
属性说明类型默认值
embedded使用更深的背景色展现嵌入效果booleanfalse
fixedfixed 模式将会把 CSS position 设为 absolute，还将 left、bottom、right 设为 0。absolute 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示booleanfalse
bordered是否添加边框booleanfalse