xx-simple-ui

Layout

x-header、x-content、x-sider和x-footer必须是x-layout的子组件。

普通上中下布局


Header
Content
Footer

使用

<x-layout>
    <x-header class="headerDemo">Header</x-header>
    <x-content class="contentDemo">Content</x-content>
    <x-footer class="footerDemo">Footer</x-footer>
</x-layout>

上中下布局（含侧边栏）


Header
Sider
Content
Footer

使用

<x-layout>
    <x-header class="headerDemo">Header</x-header>
    <x-layout>
        <x-sider class="siderDemo">Sider</x-sider>
        <x-content class="contentDemo">Content</x-content>
    </x-layout>
    <x-footer class="footerDemo">Footer</x-footer>
</x-layout>

侧边栏 + 上中下布局


Sider
Header
Content
Footer

使用

<x-layout>
    <x-sider class="siderDemo">Sider</x-sider>
    <x-layout>
        <x-header class="headerDemo">Header</x-header>
        <x-content class="contentDemo">Content</x-content>
        <x-footer class="footerDemo">Footer</x-footer>
    </x-layout>
</x-layout>

← Collapse →