Skip to content

Commit 53a9d98

Browse files
marcosmouramarcosmoura
committed
feat(MdDrawer): create all kinds of drawers
1 parent fb1c253 commit 53a9d98

File tree

9 files changed

+504
-62
lines changed

9 files changed

+504
-62
lines changed

‎docs/app/pages/Components/Drawer/Drawer.vue

+21-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
<example src="./examples/Sidenav.vue" />
1+
<example src="./examples/Temporary.vue" />
2+
<example src="./examples/PermanentFull.vue" />
3+
<example src="./examples/PermanentClipped.vue" />
4+
<example src="./examples/PermanentCard.vue" />
5+
<example src="./examples/Persistent.vue" />
26

37
<template>
48
<page-container centered :title="$t('pages.drawer.title')">
@@ -7,9 +11,23 @@
711
</div>
812

913
<div class="page-container-section">
10-
<h2>Navigation Drawer</h2>
14+
<h2>Permanent</h2>
1115

12-
<code-example title="Side Nav" :component="examples['sidenav']" />
16+
<code-example title="Full Height" :component="examples['permanent-full']" />
17+
<code-example title="Clipped" :component="examples['permanent-clipped']" />
18+
<code-example title="Card" :component="examples['permanent-card']" />
19+
</div>
20+
21+
<div class="page-container-section">
22+
<h2>Persistent</h2>
23+
24+
<code-example title="Push page content" :component="examples['persistent']" />
25+
</div>
26+
27+
<div class="page-container-section">
28+
<h2>Temporary</h2>
29+
30+
<code-example title="Side Nav" :component="examples['temporary']" />
1331
</div>
1432
</page-container>
1533
</template>

‎docs/app/pages/Components/Drawer/examples/PermanentCard.vue

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<div class="page-container">
3+
<md-toolbar class="md-primary">
4+
<span class="md-title">My Title</span>
5+
</md-toolbar>
6+
7+
<main class="page-wrapper md-layout-row">
8+
<md-drawer md-permanent="card">
9+
<md-list>
10+
<md-list-item>
11+
<md-icon>move_to_inbox</md-icon>
12+
<span class="md-list-item-text">Inbox</span>
13+
</md-list-item>
14+
15+
<md-list-item>
16+
<md-icon>send</md-icon>
17+
<span class="md-list-item-text">Sent Mail</span>
18+
</md-list-item>
19+
20+
<md-list-item>
21+
<md-icon>delete</md-icon>
22+
<span class="md-list-item-text">Trash</span>
23+
</md-list-item>
24+
25+
<md-list-item>
26+
<md-icon>error</md-icon>
27+
<span class="md-list-item-text">Spam</span>
28+
</md-list-item>
29+
</md-list>
30+
</md-drawer>
31+
32+
<div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div>
33+
</main>
34+
</div>
35+
</template>
36+
37+
<style lang="scss" scoped>
38+
.page-container {
39+
border: 1px solid rgba(#000, .12);
40+
}
41+
42+
// Demo purposes only
43+
.md-drawer {
44+
width: 230px;
45+
max-width: calc(100vw - 125px);
46+
}
47+
48+
.page-content {
49+
padding: 16px 0;
50+
}
51+
</style>
52+
53+
<script>
54+
export default {
55+
name: 'PermanentCard'
56+
}
57+
</script>

‎docs/app/pages/Components/Drawer/examples/PermanentClipped.vue

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class="page-container">
3+
<md-toolbar class="md-primary">
4+
<span class="md-title">My Title</span>
5+
</md-toolbar>
6+
7+
<main class="page-wrapper md-layout-row">
8+
<md-drawer md-permanent="clipped">
9+
<md-list>
10+
<md-list-item>
11+
<md-icon>move_to_inbox</md-icon>
12+
<span class="md-list-item-text">Inbox</span>
13+
</md-list-item>
14+
15+
<md-list-item>
16+
<md-icon>send</md-icon>
17+
<span class="md-list-item-text">Sent Mail</span>
18+
</md-list-item>
19+
20+
<md-list-item>
21+
<md-icon>delete</md-icon>
22+
<span class="md-list-item-text">Trash</span>
23+
</md-list-item>
24+
25+
<md-list-item>
26+
<md-icon>error</md-icon>
27+
<span class="md-list-item-text">Spam</span>
28+
</md-list-item>
29+
</md-list>
30+
</md-drawer>
31+
32+
<div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div>
33+
</main>
34+
</div>
35+
</template>
36+
37+
<style lang="scss" scoped>
38+
.page-container {
39+
border: 1px solid rgba(#000, .12);
40+
}
41+
42+
// Demo purposes only
43+
.md-drawer {
44+
width: 230px;
45+
max-width: calc(100vw - 125px);
46+
}
47+
48+
.page-content {
49+
padding: 16px;
50+
border-left: 1px solid rgba(#000, .12);
51+
}
52+
</style>
53+
54+
<script>
55+
export default {
56+
name: 'PermanentClipped'
57+
}
58+
</script>

‎docs/app/pages/Components/Drawer/examples/PermanentFull.vue

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<div class="page-container md-layout-row">
3+
<md-drawer md-permanent="full">
4+
<md-toolbar class="md-transparent" md-elevation="0">
5+
Navigation
6+
</md-toolbar>
7+
8+
<md-list>
9+
<md-list-item>
10+
<md-icon>move_to_inbox</md-icon>
11+
<span class="md-list-item-text">Inbox</span>
12+
</md-list-item>
13+
14+
<md-list-item>
15+
<md-icon>send</md-icon>
16+
<span class="md-list-item-text">Sent Mail</span>
17+
</md-list-item>
18+
19+
<md-list-item>
20+
<md-icon>delete</md-icon>
21+
<span class="md-list-item-text">Trash</span>
22+
</md-list-item>
23+
24+
<md-list-item>
25+
<md-icon>error</md-icon>
26+
<span class="md-list-item-text">Spam</span>
27+
</md-list-item>
28+
</md-list>
29+
</md-drawer>
30+
31+
<main class="page-wrapper md-flex md-layout-column">
32+
<md-toolbar class="md-primary">
33+
<span class="md-title">My Title</span>
34+
</md-toolbar>
35+
36+
<div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div>
37+
</main>
38+
</div>
39+
</template>
40+
41+
<style lang="scss" scoped>
42+
.page-container {
43+
border: 1px solid rgba(#000, .12);
44+
}
45+
46+
// Demo purposes only
47+
.md-drawer {
48+
width: 230px;
49+
max-width: calc(100vw - 125px);
50+
}
51+
52+
.page-content {
53+
padding: 16px;
54+
border-left: 1px solid rgba(#000, .12);
55+
}
56+
</style>
57+
58+
<script>
59+
export default {
60+
name: 'PermanentFull'
61+
}
62+
</script>

‎docs/app/pages/Components/Drawer/examples/Persistent.vue

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template>
2+
<div class="page-container md-layout-row">
3+
<md-drawer :md-visible.sync="menuVisible" md-persistent>
4+
<md-toolbar class="md-transparent" md-elevation="0">
5+
<span>Navigation</span>
6+
7+
<div class="md-toolbar-section-end">
8+
<md-button class="md-icon-button md-dense" @click="toggleMenu">
9+
<md-icon>keyboard_arrow_left</md-icon>
10+
</md-button>
11+
</div>
12+
</md-toolbar>
13+
14+
<md-list>
15+
<md-list-item>
16+
<md-icon>move_to_inbox</md-icon>
17+
<span class="md-list-item-text">Inbox</span>
18+
</md-list-item>
19+
20+
<md-list-item>
21+
<md-icon>send</md-icon>
22+
<span class="md-list-item-text">Sent Mail</span>
23+
</md-list-item>
24+
25+
<md-list-item>
26+
<md-icon>delete</md-icon>
27+
<span class="md-list-item-text">Trash</span>
28+
</md-list-item>
29+
30+
<md-list-item>
31+
<md-icon>error</md-icon>
32+
<span class="md-list-item-text">Spam</span>
33+
</md-list-item>
34+
</md-list>
35+
</md-drawer>
36+
37+
<main class="page-wrapper md-flex md-layout-column">
38+
<md-toolbar class="md-primary">
39+
<md-button class="md-icon-button" @click="toggleMenu" v-if="!menuVisible">
40+
<md-icon>menu</md-icon>
41+
</md-button>
42+
<span class="md-title">My Title</span>
43+
</md-toolbar>
44+
45+
<div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div>
46+
</main>
47+
</div>
48+
</template>
49+
50+
<style lang="scss" scoped>
51+
.page-container {
52+
overflow: hidden;
53+
border: 1px solid rgba(#000, .12);
54+
}
55+
56+
// Demo purposes only
57+
.md-drawer {
58+
width: 230px;
59+
max-width: calc(100vw - 125px);
60+
}
61+
62+
.page-content {
63+
padding: 16px;
64+
border-left: 1px solid rgba(#000, .12);
65+
}
66+
</style>
67+
68+
<script>
69+
export default {
70+
name: 'Persistent',
71+
data: () => ({
72+
menuVisible: false
73+
}),
74+
methods: {
75+
toggleMenu () {
76+
this.menuVisible = !this.menuVisible
77+
}
78+
}
79+
}
80+
</script>

‎docs/app/pages/Components/Drawer/examples/Sidenav.vue

-38
This file was deleted.

0 commit comments

Comments
 (0)