taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: refine sidenav and layout demo, update veui

Browse Source
This commit is contained in:
Justineo
2022-04-21 23:23:30 +08:00
parent eadaad2e22
commit f516b26edd
18 changed files with 1596 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
one/docs/demo/form/withhold.vue
View File

@@ -10,10 +10,10 @@
>
<template #default="{ invalid, listeners }">
<input
v-model="formData.name"
:class="{
'demo-invalid': invalid
}"
v-model="formData.name"
v-on="listeners"
>
</template>

4
one/docs/demo/grid/default.vue
View File

@@ -64,6 +64,10 @@ export default {
</script>
<style lang="less" scoped>
article {
padding: 10px 12px;
}
.veui-grid-row {
& + & {
margin: 2px 0; /* Just for showcase */

1
one/docs/demo/grid/fixed.vue
View File

@@ -53,6 +53,7 @@ export default {
<style lang="less" scoped>
article {
width: 400px; /* Fixed-width container */
padding: 10px 12px;
}
.veui-grid-row {

29
one/docs/demo/layout/basic.vue
View File

@@ -1,19 +1,21 @@
<template>
<article>
<div class="mock-window">
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-header>Header</veui-header>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-sidebar>
<div class="center full">Sidebar</div>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
</veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</veui-layout>
</div>
</veui-layout>
</article>
</template>
@@ -32,12 +34,11 @@ export default {
</script>
<style lang="less" scoped>
.mock-window {
height: 384px;
transform: translate(0, 0); // bfc for fixed
article {
height: 100%;
& > .veui-layout {
min-width: 860px;
min-width: 720px;
}
}

29
one/docs/demo/layout/global-footer.vue
View File

@@ -1,19 +1,21 @@
<template>
<article>
<div class="mock-window">
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-header>Header</veui-header>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-sidebar>
<div class="center full">Sidebar</div>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
</veui-layout>
<veui-content>Content</veui-content>
</veui-layout>
<veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
</veui-layout>
</div>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</article>
</template>
@@ -36,12 +38,11 @@ export default {
</script>
<style lang="less" scoped>
.mock-window {
height: 384px;
transform: translate(0, 0); // bfc for fixed
article {
height: 100%;
& > .veui-layout {
min-width: 860px;
min-width: 720px;
}
}

29
one/docs/demo/layout/global-sidebar.vue
View File

@@ -1,19 +1,21 @@
<template>
<article>
<div class="mock-window">
<veui-layout>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-sidebar>
<div class="center full">Sidebar</div>
</veui-sidebar>
<veui-header>Header</veui-header>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
</veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</veui-layout>
</div>
</veui-layout>
</article>
</template>
@@ -36,12 +38,11 @@ export default {
</script>
<style lang="less" scoped>
.mock-window {
height: 384px;
transform: translate(0, 0); // bfc for fixed
article {
height: 100%;
& > .veui-layout {
min-width: 860px;
min-width: 720px;
}
}

50
one/docs/demo/layout/sticky.vue
View File

@@ -1,21 +1,36 @@
<template>
<article>
<div class="mock-window">
<veui-layout style="--dls-layout-header-height: 64px;">
<veui-header sticky>Header</veui-header>
<veui-layout style="--dls-layout-header-height: 64px;">
<veui-header sticky>
Header
</veui-header>
<veui-layout>
<veui-sidebar
sticky
style="max-height: 320px;"
>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-sidebar sticky style="max-height: 320px;">
<div class="center full">Sidebar</div>
</veui-sidebar>
<veui-layout>
<veui-content>
<div class="center" style="height: 800px;">Sidebar</div>
</veui-content>
<veui-footer sticky style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
</veui-layout>
<veui-content>
<div
class="center"
style="height: 800px;"
>
Sidebar
</div>
</veui-content>
<veui-footer
sticky
style="background: #ccc;"
>
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</veui-layout>
</div>
</veui-layout>
</article>
</template>
@@ -43,14 +58,11 @@ export default {
</script>
<style lang="less" scoped>
.mock-window {
height: 384px;
transform: translate(0, 0); // bfc for fixed
overflow: auto;
border: 1px solid #eee;
article {
height: 100%;
& > .veui-layout {
min-width: 860px;
min-width: 720px;
}
}

52
one/docs/demo/menu/collaspible.vue → one/docs/demo/sidenav/collaspible.vue
View File

@@ -1,25 +1,41 @@
<template>
<article>
<section>
<veui-menu
:items="items"
collapsible
/>
</section>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-sidebar collapsible>
<veui-sidenav
:items="items"
collapsible
/>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</veui-layout>
</veui-layout>
</article>
</template>
<script>
import { Menu } from 'veui'
import { Layout, Header, Footer, Sidebar, Content, Sidenav } from 'veui'
import 'veui-theme-dls-icons/calendar'
import 'veui-theme-dls-icons/bullseye'
import 'veui-theme-dls-icons/clock'
import 'veui-theme-dls-icons/eye'
export default {
name: 'veui-menu-demo',
name: 'veui-sidenav-demo',
components: {
'veui-menu': Menu
'veui-layout': Layout,
'veui-header': Header,
'veui-footer': Footer,
'veui-sidebar': Sidebar,
'veui-content': Content,
'veui-sidenav': Sidenav
},
data () {
let items = [
@@ -95,3 +111,21 @@ export default {
}
}
</script>
<style lang="less" scoped>
article {
height: 100%;
& > .veui-layout {
min-width: 720px;
}
}
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
display: flex;
align-items: center;
justify-content: center;
}
</style>

10
one/docs/demo/menu/normal.vue → one/docs/demo/sidenav/normal.vue
View File

@@ -1,18 +1,16 @@
<template>
<article>
<section>
<veui-menu :items="items"/>
</section>
<veui-sidenav :items="items"/>
</article>
</template>
<script>
import { Menu } from 'veui'
import { Sidenav } from 'veui'
export default {
name: 'veui-menu-demo',
name: 'veui-sidenav-demo',
components: {
'veui-menu': Menu
'veui-sidenav': Sidenav
},
data () {
let items = [

24
one/docs/demo/menu/slot.vue → one/docs/demo/sidenav/slot.vue
View File

@@ -1,26 +1,24 @@
<template>
<article>
<section>
<veui-menu
:items="items"
collapsible
>
<template #icon>
<veui-icon name="calendar"/>
</template>
</veui-menu>
</section>
<veui-sidenav
:items="items"
collapsible
>
<template #icon>
<veui-icon name="calendar"/>
</template>
</veui-sidenav>
</article>
</template>
<script>
import { Menu, Icon } from 'veui'
import { Sidenav, Icon } from 'veui'
import 'veui-theme-dls-icons/calendar'
export default {
name: 'veui-menu-demo',
name: 'veui-sidenav-demo',
components: {
'veui-menu': Menu,
'veui-sidenav': Sidenav,
'veui-icon': Icon
},
data () {