布局 | Pied-design-ui

布局

基本使用

header

main

header

main

header

aside

main

header

aside

main

aside

header

main

aside

header

main

代码示例

<template>
    <div class="box">
        <pied-container>
            <pied-header>header</pied-header>
            <pied-main>main</pied-main>
        </pied-container>
    </div>
    <div class="box">
        <pied-container>
            <pied-header>header</pied-header>
            <pied-main>main</pied-main>
            <pied-footer>footer</pied-footer>
        </pied-container>
    </div>
    <div class="box">
        <pied-container>
            <pied-header>header</pied-header>
            <pied-container flex="row">
                <pied-aside>aside</pied-aside>
                <pied-main>main</pied-main> 
            </pied-container>
        </pied-container>
    </div>
    <div class="box">
        <pied-container>
            <pied-header>header</pied-header>
            <pied-container flex="row">
                <pied-aside>aside</pied-aside>
                <pied-main>main</pied-main> 
            </pied-container>
            <pied-footer>footer</pied-footer>
        </pied-container>
    </div>
    <div class="box">
        <pied-container flex="row">
            <pied-aside width="300px">aside</pied-aside>
            <pied-container flex="column">
                <pied-header>header</pied-header>
                <pied-main>main</pied-main> 
            </pied-container>
        </pied-container>
    </div>
    <div class="box">
        <pied-container flex="row">
            <pied-aside width="300px">aside</pied-aside>
            <pied-container flex="column">
            <pied-header>header</pied-header>
            <pied-main>main</pied-main> 
            <pied-footer>footer</pied-footer>
            </pied-container>
        </pied-container>
    </div>
</template>

参数	说明	可选值	默认值	类型
flex	排版格式	row,column	column	String
width	aside宽度	px	200px	String

布局 #

基本使用 #

布局

基本使用