<template>
<div>
<fish-layout class="demo">
<div slot="header">Header</div>
<div slot="content" style="height: 120px;">Content</div>
<div slot="footer">Footer</div>
</fish-layout>
<fish-layout sider="l" class="demo">
<div slot="header">Header</div>
<div slot="sider">Left</div>
<div slot="content" style="height: 120px;">Content</div>
<div slot="footer">Footer</div>
</fish-layout>
<fish-layout sider="tl" class="demo" style="margin-bottom: 0;">
<div slot="sider">Top Left</div>
<div slot="header">Header</div>
<div slot="content" style="height: 120px;">Content</div>
<div slot="footer">Footer</div>
</fish-layout>
</div>
</template>
<script>
export default {
name: 'demo-layout-base'
}
</script>
<style>
.fish.layout.demo {
text-align: center;
color: #ffffff;
margin-bottom: 20px;
font-weight: bold;
}
.fish.layout.demo .header, .fish.layout.demo .footer{
background: #7dbcea;
color: #fff;
}
.fish.layout.demo .sider {
background: #3ba0e9;
}
.fish.layout.demo .content {
background: rgba(16, 142, 233, 1);
line-height: 120px;
}
</style><template>
<fish-layout class="demo2">
<nav slot="header">
<div class="logo">Logo / System</div>
<fish-menu mode="horizontal" style="background: transparent; border-bottom: 0;">
<fish-option index="1" content="Nav 1"></fish-option>
<fish-option index="2" content="Nav 2"></fish-option>
<fish-option index="3" content="Nav 3"></fish-option>
</fish-menu>
</nav>
<div slot="content" style="height: 100px;">
Content...........
</div>
<div slot="footer">2017@copyright myliang</div>
</fish-layout>
</template>
<script>
export default {
name: 'demo-layout-up-middle-down'
}
</script>
<style>
.logo {
padding: 0.7em .8em;
font-weight: bold;
font-size: 1.2rem;
}
.fish.layout.demo2 > .header {
padding: 0 20px;
background: #e0f0fa;
margin-bottom: 20px;
}
.fish.layout.demo2 > .content {
margin: 0 20px;
padding: 0.7em 1em;
}
</style><template>
<fish-layout class="demo3" sider="l">
<nav slot="header">
<div class="logo">Logo / System</div>
</nav>
<div slot="sider">
<fish-menu mode="inline" style="width: 200px;">
<fish-option index="0" content="Content"></fish-option>
<fish-submenu index="1" mode="inline">
<template slot="title">User</template>
<fish-option index="1-0" content="Jack"></fish-option>
<fish-option index="1-1" content="Lucy"></fish-option>
<fish-option index="1-2" content="Active"></fish-option>
</fish-submenu>
<fish-option index="2" content="Tongji"></fish-option>
<fish-submenu index="3" mode="inline">
<template slot="title">submenu</template>
<fish-option index="3-0" content="Jack"></fish-option>
<fish-option index="3-1" content="Lucy"></fish-option>
<fish-option index="3-2" content="Active"></fish-option>
<fish-submenu index="3-3" mode="inline">
<template slot="title">submenu-3</template>
<fish-option index="3-3-0" content="Jack"></fish-option>
<fish-option index="3-3-1" content="Lucy"></fish-option>
<fish-option index="3-3-2" content="Active"></fish-option>
</fish-submenu>
</fish-submenu>
</fish-menu>
</div>
<div slot="content">Content...</div>
</fish-layout>
</template>
<script>
export default {
name: 'demo-layout-top-sider-header'
}
</script>
<style>
.fish.layout.demo3 > .header {
padding: 0;
background: #e0f0fa;
}
.fish.layout.demo3 .has-sider > .content {
margin: 20px;
padding: 0.7em 1em;
}
.fish.layout.demo3 .logo {
padding: 1em;
}
.logo {
padding: 0.7em .8em;
font-weight: bold;
font-size: 1.2rem;
}
</style><template>
<fish-layout class="demo3" sider="tl">
<div slot="sider">
<div class="logo" style="background: #e0f0fa;">Logo / System</div>
<fish-menu mode="inline" style="width: 200px;">
<fish-option index="0" content="Content"></fish-option>
<fish-submenu index="1" mode="inline">
<template slot="title">User</template>
<fish-option index="1-0" content="Jack"></fish-option>
<fish-option index="1-1" content="Lucy"></fish-option>
<fish-option index="1-2" content="Active"></fish-option>
</fish-submenu>
<fish-option index="2" content="Tongji"></fish-option>
<fish-submenu index="3" mode="inline">
<template slot="title">submenu</template>
<fish-option index="3-0" content="Jack"></fish-option>
<fish-option index="3-1" content="Lucy"></fish-option>
<fish-option index="3-2" content="Active"></fish-option>
<fish-submenu index="3-3" mode="inline">
<template slot="title">submenu-3</template>
<fish-option index="3-3-0" content="Jack"></fish-option>
<fish-option index="3-3-1" content="Lucy"></fish-option>
<fish-option index="3-3-2" content="Active"></fish-option>
</fish-submenu>
</fish-submenu>
</fish-menu>
</div>
<div slot="content">Content...</div>
</fish-layout>
</template>
<script>
export default {
name: 'demo-layout-sider'
}
</script>
<style>
.fish.layout.demo3 > .header {
padding: 0;
background: #e0f0fa;
}
.fish.layout.demo3 .has-sider > .content {
margin: 20px;
padding: 0.7em 1em;
}
.fish.layout.demo3 .logo {
padding: 1em;
}
.logo {
padding: 0.7em .8em;
font-weight: bold;
font-size: 1.2rem;
}
</style>| {{column}} |
|---|