Skip to content

Commit 60228b8

Browse files
marcosmouramarcosmoura
authoredJun 27, 2017
Merge pull request #8 from vuematerial/components/MdToolbar
Components/md toolbar
2 parents 04a229a + dc870d4 commit 60228b8

File tree

13 files changed

+415
-79
lines changed

13 files changed

+415
-79
lines changed
 

‎docs/app/App.vue

+27-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="container" :class="containerClass">
3-
<md-toolbar class="main-header" :class="mainHeaderClasses">
3+
<md-toolbar class="main-header" :md-elevation="mainHeaderElevation" :class="mainHeaderClasses">
44
<div class="logo">
55
<logo-vue-material :animated="isHome" :blending="false" @click.native="$router.push('/')" />
66
</div>
@@ -27,6 +27,7 @@
2727
<router-link to="/components/button">{{ $t('pages.button.title') }}</router-link>
2828
<router-link to="/components/content">{{ $t('pages.content.title') }}</router-link>
2929
<router-link to="/components/icon">{{ $t('pages.icon.title') }}</router-link>
30+
<router-link to="/components/toolbar">{{ $t('pages.toolbar.title') }}</router-link>
3031
</div>
3132
<router-link to="/ui-elements">{{ $t('pages.uiElements.title') }}</router-link>
3233
<div class="main-navigation-level">
@@ -56,6 +57,16 @@
5657
.container {
5758
padding-top: 64px;
5859
font-family: "Roboto Mono", monospace;
60+
transition: $md-transition-default;
61+
transition-property: padding-top;
62+
63+
@include md-layout-small {
64+
padding-top: 48px;
65+
}
66+
67+
@include md-layout-xsmall {
68+
padding-top: 56px;
69+
}
5970
6071
&:not(.splash) {
6172
padding-left: $sizebar-width;
@@ -125,9 +136,16 @@
125136
top: 90px;
126137
bottom: 0;
127138
left: 0;
139+
transition: $md-transition-default;
140+
transition-property: top;
128141
font-size: 14px;
129142
143+
@include md-layout-small {
144+
top: 74px;
145+
}
146+
130147
@include md-layout-xsmall {
148+
top: 82px;
131149
padding: 16px;
132150
position: static;
133151
}
@@ -201,9 +219,15 @@
201219
const { isSplash } = this
202220
203221
return {
204-
'md-transparent': isSplash,
205-
'md-elevation-2': !isSplash
222+
'md-transparent': isSplash
206223
}
224+
},
225+
mainHeaderElevation () {
226+
if (this.isSplash) {
227+
return 0
228+
}
229+
230+
return 2
207231
}
208232
},
209233
methods: {

‎docs/app/components/CodeExample.vue

+44-40
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="code-example">
3-
<md-toolbar class="md-primary md-dense" md-theme="dark">
3+
<md-toolbar class="md-primary md-dense" md-theme="dark" md-elevation="0">
44
<span class="md-title">{{ title }}</span>
55
<md-button class="md-icon-button md-dense" @click="toggleCode" v-if="component.name">
66
<md-icon>code</md-icon>
@@ -26,6 +26,45 @@
2626
</div>
2727
</template>
2828

29+
<script>
30+
export default {
31+
name: 'CodeExample',
32+
props: {
33+
component: {
34+
type: Object,
35+
default: () => ({})
36+
},
37+
title: String,
38+
label: {
39+
type: String,
40+
default: 'Vue'
41+
},
42+
lang: String
43+
},
44+
data: () => ({
45+
codeActive: false,
46+
darkTheme: false
47+
}),
48+
computed: {
49+
theme () {
50+
if (this.darkTheme) {
51+
return 'demo-dark'
52+
}
53+
54+
return 'demo-light'
55+
}
56+
},
57+
methods: {
58+
toggleCode () {
59+
this.codeActive = !this.codeActive
60+
},
61+
toggleDarkTheme () {
62+
this.darkTheme = !this.darkTheme
63+
}
64+
}
65+
}
66+
</script>
67+
2968
<style lang="scss" scoped>
3069
@import "~vue-material/components/MdAnimation/variables";
3170
@import "~vue-material/theme/factory";
@@ -41,6 +80,10 @@
4180
z-index: 1;
4281
background-color: $color;
4382
color: #fff;
83+
84+
.md-icon {
85+
color: #fff;
86+
}
4487
}
4588
4689
.md-title {
@@ -83,42 +126,3 @@
83126
opacity: 1;
84127
}
85128
</style>
86-
87-
<script>
88-
export default {
89-
name: 'CodeExample',
90-
props: {
91-
component: {
92-
type: Object,
93-
default: () => ({})
94-
},
95-
title: String,
96-
label: {
97-
type: String,
98-
default: 'Vue'
99-
},
100-
lang: String
101-
},
102-
data: () => ({
103-
codeActive: false,
104-
darkTheme: false
105-
}),
106-
computed: {
107-
theme () {
108-
if (this.darkTheme) {
109-
return 'demo-dark'
110-
}
111-
112-
return 'demo-light'
113-
}
114-
},
115-
methods: {
116-
toggleCode () {
117-
this.codeActive = !this.codeActive
118-
},
119-
toggleDarkTheme () {
120-
this.darkTheme = !this.darkTheme
121-
}
122-
}
123-
}
124-
</script>

‎docs/app/components/JsfiddleEdit.vue

+14-6
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,6 @@ new Vue({
4646
</form>
4747
</template>
4848

49-
<style lang="scss" scoped>
50-
.form-data {
51-
display: none;
52-
}
53-
</style>
54-
5549
<script>
5650
const vueMaterialUrl = 'https://unpkg.com/vue-material'
5751
@@ -87,3 +81,17 @@ new Vue({
8781
}
8882
}
8983
</script>
84+
85+
<style lang="scss" scoped>
86+
.jsfiddle-edit {
87+
.form-data {
88+
display: none;
89+
}
90+
91+
.md-button {
92+
.md-icon {
93+
color: #fff;
94+
}
95+
}
96+
}
97+
</style>

‎docs/app/i18n/en-US.js

+3
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ export default {
3131
icon: {
3232
title: 'Icon'
3333
},
34+
toolbar: {
35+
title: 'Toolbar'
36+
},
3437
layout: {
3538
title: 'Layout'
3639
},

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

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<example src="./examples/RegularToolbar.vue" />
2+
<example src="./examples/ToolbarSizes.vue" />
3+
<example src="./examples/ContentActions.vue" />
4+
5+
<template>
6+
<page-container centered :title="$t('pages.content.title')">
7+
<div class="page-container-section">
8+
<p>Toolbar actions appear above the view affected by their actions. They may constrain their width to accommodate material passing over them.</p>
9+
</div>
10+
11+
<div class="page-container-section">
12+
<h2>Toolbars</h2>
13+
14+
<code-example title="Regular Toolbars" :component="examples['regular-toolbar']" />
15+
16+
<api-item title="API">
17+
<p>The following options can be applied to all buttons, even the FAB ones:</p>
18+
19+
<api-table :headings="api.regular.classes.headings" :props="api.regular.classes.props" slot="classes" />
20+
<api-table :headings="api.regular.props.headings" :props="api.regular.props.props" slot="props" />
21+
</api-item>
22+
</div>
23+
24+
<div class="page-container-section">
25+
<h2>Different Sizes</h2>
26+
27+
<code-example title="Sizes" :component="examples['toolbar-sizes']" />
28+
</div>
29+
30+
<div class="page-container-section">
31+
<h2>Content and Actions</h2>
32+
<p>As the Toolbars are mostly used to hold actions that affects the entire application, you can create rows or sections inside it.</p>
33+
<p>Although those rows works on every toolbar, they we're created to hold contents for large toolbars. This element is represented by the <code>.md-toolbar-row</code> class. A row can also have a <code>.md-toolbar-offset</code> to add a little space on the left of it. This is commonly used inside the second row of an large toolbar.</p>
34+
<p>The sections are used to split horizontally the content of the toolbar (or the row inside). You can apply them using two types of section: <code>.md-toolbar-section-start</code> will be left-aligned and <code>.md-toolbar-section-end</code> right-aligned.</p>
35+
36+
<code-example title="Rows, Title and Icons" :component="examples['content-actions']" />
37+
</div>
38+
</page-container>
39+
</template>
40+
41+
<script>
42+
import examples from 'docs-mixins/docsExample'
43+
44+
export default {
45+
name: 'Content',
46+
mixins: [examples],
47+
data: () => ({
48+
api: {
49+
regular: {
50+
props: {
51+
headings: ['Name', 'Description', 'Default'],
52+
props: [
53+
{
54+
name: 'md-elevation',
55+
type: 'String|Number',
56+
description: 'Set the toolbar shadow elevation',
57+
defaults: '4'
58+
}
59+
]
60+
},
61+
classes: {
62+
headings: ['Name', 'Description'],
63+
props: [
64+
{
65+
name: 'md-transparent',
66+
description: 'Make the Toolbar background transparent'
67+
},
68+
{
69+
name: 'md-dense',
70+
description: 'Create a small sized toolbar'
71+
},
72+
{
73+
name: 'md-medium',
74+
description: 'Create a medium sized toolbar'
75+
},
76+
{
77+
name: 'md-large',
78+
description: 'Create a large sized toolbar'
79+
}
80+
]
81+
}
82+
}
83+
}
84+
})
85+
}
86+
</script>

‎docs/app/pages/Components/Toolbar/examples/ContentActions.vue

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<div>
3+
<md-toolbar>
4+
<h3 class="md-title" style="flex: 1">Title</h3>
5+
<md-button class="md-icon-button">
6+
<md-icon>more_vert</md-icon>
7+
</md-button>
8+
</md-toolbar>
9+
10+
<md-toolbar class="md-accent" md-elevation="1">
11+
<h3 class="md-title" style="flex: 1">Title</h3>
12+
<md-button>Refresh</md-button>
13+
<md-button class="md-primary">Create</md-button>
14+
</md-toolbar>
15+
16+
<md-toolbar class="md-large md-primary">
17+
<div class="md-toolbar-row">
18+
<div class="md-toolbar-section-start">
19+
<md-button class="md-icon-button">
20+
<md-icon>menu</md-icon>
21+
</md-button>
22+
</div>
23+
24+
<div class="md-toolbar-section-end">
25+
<md-button class="md-icon-button">
26+
<md-icon>refresh</md-icon>
27+
</md-button>
28+
29+
<md-button class="md-icon-button">
30+
<md-icon>more_vert</md-icon>
31+
</md-button>
32+
</div>
33+
</div>
34+
35+
<div class="md-toolbar-row md-toolbar-offset">
36+
<h3 class="md-title">Title on a second row</h3>
37+
</div>
38+
</md-toolbar>
39+
</div>
40+
</template>
41+
42+
<style lang="scss" scoped>
43+
.md-toolbar + .md-toolbar {
44+
margin-top: 16px;
45+
}
46+
</style>
47+
48+
<script>
49+
export default {
50+
name: 'ContentAction'
51+
}
52+
</script>

‎docs/app/pages/Components/Toolbar/examples/RegularToolbar.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div>
3+
<md-toolbar>
4+
<h3 class="md-title">Default</h3>
5+
</md-toolbar>
6+
7+
<md-toolbar md-elevation="0">
8+
<h3 class="md-title">No Elevation</h3>
9+
</md-toolbar>
10+
11+
<md-toolbar class="md-transparent">
12+
<h3 class="md-title">Transparent</h3>
13+
</md-toolbar>
14+
15+
<md-toolbar class="md-primary">
16+
<h3 class="md-title">Primary</h3>
17+
</md-toolbar>
18+
19+
<md-toolbar class="md-accent">
20+
<h3 class="md-title">Accent</h3>
21+
</md-toolbar>
22+
</div>
23+
</template>
24+
25+
<style lang="scss" scoped>
26+
.md-toolbar + .md-toolbar {
27+
margin-top: 16px;
28+
}
29+
</style>
30+
31+
<script>
32+
export default {
33+
name: 'RegularToolbar'
34+
}
35+
</script>

0 commit comments

Comments
 (0)