+280
-205
lines changedFilter options
+280
-205
lines changed Original file line number Diff line number Diff line change
@@ -52,6 +52,9 @@ export default {
52 52
title: 'Themes - Advanced',
53 53
nav: 'Advanced'
54 54
},
55 +
withRouter: {
56 +
title: 'Work with Vue Router'
57 +
},
55 58
components: {
56 59
title: 'Components',
57 60
},
@@ -2,19 +2,26 @@
2 2
<div>
3 3
<div class="phone-viewport">
4 4
<md-bottom-bar md-sync-route>
5 -
<md-bottom-bar-item to="/components/bottom-bar/home" md-label="Home" md-icon="home"></md-bottom-bar-item>
5 +
<md-bottom-bar-item to="/components/bottom-bar" exact md-label="Home" md-icon="home"></md-bottom-bar-item>
6 6
<md-bottom-bar-item to="/components/bottom-bar/posts" md-label="Posts" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>
7 7
<md-bottom-bar-item to="/components/bottom-bar/favorites" md-label="Favorites" md-icon="favorite"></md-bottom-bar-item>
8 8
</md-bottom-bar>
9 9
</div>
10 10 11 11
<div class="phone-viewport">
12 12
<md-bottom-bar class="md-accent" md-sync-route>
13 -
<md-bottom-bar-item to="/components/bottom-bar/home" md-label="Home" md-icon="home"></md-bottom-bar-item>
13 +
<md-bottom-bar-item to="/components/bottom-bar" exact md-label="Home" md-icon="home"></md-bottom-bar-item>
14 14
<md-bottom-bar-item to="/components/bottom-bar/posts" md-label="Posts" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>
15 15
<md-bottom-bar-item to="/components/bottom-bar/favorites" md-label="Favorites" md-icon="favorite"></md-bottom-bar-item>
16 16
</md-bottom-bar>
17 17
</div>
18 + 19 +
<div class="phone-viewport">
20 +
<md-bottom-bar class="md-accent" md-sync-route>
21 +
<md-bottom-bar-item to="/components/bottom-bar/posts/1" md-label="Post 1" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>
22 +
<md-bottom-bar-item to="/components/bottom-bar/posts/2" md-label="Post 2" md-icon="/assets/icon-whatshot.svg"></md-bottom-bar-item>
23 +
</md-bottom-bar>
24 +
</div>
18 25
</div>
19 26
</template>
20 27
@@ -34,4 +41,8 @@
34 41
border: 1px solid rgba(#000, .26);
35 42
background: rgba(#000, .06);
36 43
}
44 + 45 +
.md-bottom-bar .md-bottom-bar-item.router-link-active {
46 +
text-shadow: 0 0 5px;
47 +
}
37 48
</style>
Original file line number Diff line number Diff line change
@@ -4,8 +4,12 @@
4 4
<md-list-item>Plain Text</md-list-item>
5 5
<md-list-item @click="alert">Button</md-list-item>
6 6
<md-list-item href="https://google.com" target="_blank">Link</md-list-item>
7 -
<md-list-item to="/components/list/router">Link Router</md-list-item>
8 -
<md-list-item to="/components/list">Link Router Active Color</md-list-item>
7 +
<md-list-item to="/components/list" exact>Router <code>/</code></md-list-item>
8 +
<md-list-item to="/components/list/router">Router <code>/router/**</code></md-list-item>
9 +
</md-list>
10 +
<md-list>
11 +
<md-list-item to="/components/list/router/1">Router <code>/router/1</code></md-list-item>
12 +
<md-list-item to="/components/list/router/2">Router <code>/router/2</code></md-list-item>
9 13
</md-list>
10 14
</div>
11 15
</template>
@@ -29,4 +33,8 @@ export default {
29 33
vertical-align: top;
30 34
border: 1px solid rgba(#000, .12);
31 35
}
36 + 37 +
.md-list .router-link-active {
38 +
text-shadow: 0 0 5px;
39 +
}
32 40
</style>
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
1 1
<template>
2 2
<div>
3 3
<md-steppers md-sync-route md-dynamic-height>
4 -
<md-step id="first" to="/components/steppers/first" md-label="First Step">
4 +
<md-step id="first" to="/components/steppers" exact md-label="First Step">
5 5
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
6 6
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
7 7
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
@@ -12,13 +12,21 @@
12 12
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
13 13
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
14 14
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
15 +
<md-list>
16 +
<md-list-item to="/components/steppers/second/sub1">Subpage 1</md-list-item>
17 +
<md-list-item to="/components/steppers/second/sub2">Subpage 2</md-list-item>
18 +
</md-list>
15 19
</md-step>
16 20 17 21
<md-step id="third" to="/components/steppers/third" md-label="Third Step">
18 22
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
19 23
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias doloribus eveniet quaerat modi cumque quos sed, temporibus nemo eius amet aliquid, illo minus blanditiis tempore, dolores voluptas dolore placeat nulla.</p>
20 24
</md-step>
21 25
</md-steppers>
26 +
<md-list>
27 +
<md-list-item to="/components/steppers/second/sub1">Subpage 2-1</md-list-item>
28 +
<md-list-item to="/components/steppers/second/sub2">Subpage 2-2</md-list-item>
29 +
</md-list>
22 30
</div>
23 31
</template>
24 32
@@ -1,7 +1,7 @@
1 1
<template>
2 2
<div>
3 3
<md-tabs md-sync-route>
4 -
<md-tab id="tab-home" md-label="Home" to="/components/tabs/home">
4 +
<md-tab id="tab-home" md-label="Home" to="/components/tabs" exact>
5 5
Home Tab
6 6
</md-tab>
7 7
@@ -1,12 +1,22 @@
1 1
<template>
2 2
<div>
3 3
<md-tabs md-sync-route>
4 -
<md-tab id="tab-home" md-label="Home" to="/components/tabs/home"></md-tab>
5 -
<md-tab id="tab-pages" md-label="Pages" to="/components/tabs/pages"></md-tab>
4 +
<md-tab id="tab-home" md-label="Home" to="/components/tabs" exact></md-tab>
5 +
<md-tab id="tab-pages" md-label="Pages" to="/components/tabs/pages">
6 +
<md-list>
7 +
<md-list-item to="/components/tabs/pages/1">Go to Subpage 1</md-list-item>
8 +
<md-list-item to="/components/tabs/pages/2">Go to Subpage 2</md-list-item>
9 +
</md-list>
10 +
</md-tab>
6 11
<md-tab id="tab-posts" md-label="Posts" to="/components/tabs/posts"></md-tab>
7 -
<md-tab id="tab-settings" md-label="Settings" to="/components/tabs/settings"></md-tab>
12 +
<md-tab id="tab-favorites" md-label="Favorites" to="/components/tabs/favorites"></md-tab>
8 13
<md-tab id="tab-disabled" md-label="Disabled" md-disabled></md-tab>
9 14
</md-tabs>
15 +
<h2>Mirror Subpage</h2>
16 +
<md-tabs md-sync-route>
17 +
<md-tab id="tab-pages-1" md-label="Pages 1" to="/components/tabs/pages/1">Subpage 1</md-tab>
18 +
<md-tab id="tab-pages-2" md-label="Pages 2" to="/components/tabs/pages/2">Subpage 2</md-tab>
19 +
</md-tabs>
10 20
</div>
11 21
</template>
12 22
@@ -15,3 +25,9 @@
15 25
name: 'TabRouter'
16 26
}
17 27
</script>
28 + 29 +
<style lang="scss" scoped>
30 +
.md-tabs /deep/ .md-tabs-navigation .md-button.router-link-active {
31 +
text-shadow: 0 0 5px;
32 +
}
33 +
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
1 +
<template>
2 +
<page-container centered :title="$t('pages.withRouter.title')">
3 +
<div class="page-container-section">
4 +
<h2 class="md-headline">Vue Material Router Link Components</h2>
5 +
<p>Vue router supported with <code><router-link to="/components/tabs">md-tab</router-link></code>, <code><router-link to="/components/list">md-list-item</router-link></code>, <code><router-link to="/components/bottom-bar">md-bottom-bar-item</router-link></code> and <code><router-link to="/components/steppers">md-step</router-link></code> so far.</p>
6 +
<p>Vue Material router link components will be auto-generated with the prop <code>to</code>. All <a href="https://router.vuejs.org/en/api/router-link.html"><code>router-link</code> props</a> except <code>tag</code> accepted.</p>
7 +
<h2 class="md-headline">Work with Router option <code>linkActiveClass</code></h2>
8 +
<p>Since Vue Router doesn't expose <code>isSameRoute</code> and <code>isIncludedRoute</code> methods, Vue Material cannot detect which links are active. Vue Material inject <code>linkActiveClass</code> with an extra active class to interact with router. Therefore, if you want to using an custom class for active link as default, you need to setup like this:</p>
9 +
<code-example title="Individual components">
10 +
const linkActiveClass = 'my-link-active-class'
11 + 12 +
// pass custom class to Vue Material
13 +
Vue.material.router.linkActiveClass = linkActiveClass
14 + 15 +
// pass custom class to Vue Router
16 +
router = new VueRouter({
17 +
routes,
18 +
linkActiveClass
19 +
})
20 + 21 +
const app = new Vue({
22 +
name: 'Root',
23 +
router,
24 +
})
25 + 26 +
</code-example>
27 +
</div>
28 +
</page-container>
29 +
</template>
30 + 31 +
<script>
32 +
export default {
33 +
name: 'WithRouter'
34 +
}
35 +
</script>
Original file line number Diff line number Diff line change
@@ -45,7 +45,7 @@ export const routes = [
45 45
page: 'Components/Datepicker/Datepicker.vue'
46 46
},
47 47
{
48 -
path: '/components/steppers/:optional?',
48 +
path: '/components/steppers/:optional?/:sub?',
49 49
name: 'components/steppers',
50 50
page: 'Components/Steppers/Steppers.vue'
51 51
},
@@ -70,12 +70,12 @@ export const routes = [
70 70
page: 'Components/Snackbar/Snackbar.vue'
71 71
},
72 72
{
73 -
path: '/components/tabs/:optional?',
73 +
path: '/components/tabs/:optional?/:sub?',
74 74
name: 'components/tabs',
75 75
page: 'Components/Tabs/Tabs.vue'
76 76
},
77 77
{
78 -
path: '/components/bottom-bar/:optional?',
78 +
path: '/components/bottom-bar/:optional?/:sub?',
79 79
name: 'components/bottom-bar',
80 80
page: 'Components/BottomBar/BottomBar.vue'
81 81
},
@@ -207,7 +207,7 @@ export const routes = [
207 207
page: 'Components/File/File.vue'
208 208
},
209 209
{
210 -
path: '/components/list/:optional?',
210 +
path: '/components/list/:optional?/:sub?',
211 211
name: 'components/list',
212 212
page: 'Components/List/List.vue'
213 213
},
@@ -262,6 +262,11 @@ export const routes = [
262 262
name: 'ui-elements/typography',
263 263
page: 'UiElements/Typography/Typography.vue'
264 264
},
265 +
{
266 +
path: '/with-router',
267 +
name: 'with-router',
268 +
page: 'WithRouter.vue'
269 +
},
265 270
{
266 271
path: '*',
267 272
name: 'error',
@@ -274,7 +279,7 @@ export const mapRoutes = () => {
274 279 275 280
routes.forEach(route => {
276 281
if (!route.redirect && route.path !== '*') {
277 -
mappedRoutes.push(route.path.replace('/:optional?', ''))
282 +
mappedRoutes.push(route.path.replace('/:optional?/:sub?', ''))
278 283
}
279 284
})
280 285
@@ -14,6 +14,8 @@
14 14
<router-link to="/themes/advanced">{{ $t('pages.themeAdvanced.nav') }}</router-link>
15 15
</div>
16 16 17 +
<router-link to="/with-router">{{ $t('pages.withRouter.title') }}</router-link>
18 + 17 19
<router-link to="/ui-elements">{{ $t('pages.uiElements.title') }}</router-link>
18 20
<div class="main-nav-level">
19 21
<router-link to="/ui-elements/elevation">{{ $t('pages.elevation.title') }}</router-link>
@@ -25,13 +25,16 @@
25 25
...MdPropValidator('md-type', ['fixed', 'shift'])
26 26
}
27 27
},
28 -
data: () => ({
29 -
MdBottomBar: {
30 -
mouseEvent: null,
31 -
activeItem: null,
32 -
items: {}
28 +
data () {
29 +
return {
30 +
MdBottomBar: {
31 +
mouseEvent: null,
32 +
activeItem: null,
33 +
items: {},
34 +
syncRoute: this.mdSyncRoute
35 +
}
33 36
}
34 -
}),
37 +
},
35 38
provide () {
36 39
return {
37 40
MdBottomBar: this.MdBottomBar
@@ -50,21 +53,12 @@
50 53
watch: {
51 54
activeItem () {
52 55
this.$emit('md-changed', this.activeItem)
56 +
},
57 +
mdSyncRoute () {
58 +
this.MdBottomBar.syncRoute = mdSyncRoute
53 59
}
54 60
},
55 61
methods: {
56 -
setupWatchers () {
57 -
if (this.mdSyncRoute) {
58 -
this.$watch('$route', {
59 -
deep: true,
60 -
handler () {
61 -
if (this.mdSyncRoute) {
62 -
this.setActiveItemByRoute()
63 -
}
64 -
}
65 -
})
66 -
}
67 -
},
68 62
hasActiveItem () {
69 63
return this.MdBottomBar.activeItem || this.mdActiveItem
70 64
},
@@ -84,47 +78,16 @@
84 78
} else {
85 79
this.MdBottomBar.activeItem = this.mdActiveItem
86 80
}
87 -
},
88 -
setActiveItemByRoute () {
89 -
const { items, keys } = this.getItemsAndKeys()
90 -
let tabIndex = null
91 - 92 -
if (this.$router) {
93 -
keys.forEach((key, index) => {
94 -
const item = items[key]
95 -
const toProp = item.props.to
96 - 97 -
if (toProp && toProp === this.$route.path) {
98 -
tabIndex = index
99 -
}
100 -
})
101 -
}
102 - 103 -
if (!this.hasActiveItem()) {
104 -
if (keys[tabIndex]) {
105 -
this.MdBottomBar.activeItem = keys[tabIndex]
106 -
} else {
107 -
this.MdBottomBar.activeItem = keys[0]
108 -
}
109 -
} else if (keys[tabIndex]) {
110 -
this.MdBottomBar.activeItem = keys[tabIndex]
111 -
}
112 81
}
113 82
},
114 83
created () {
115 84
this.MdBottomBar.type = this.mdType
116 85
},
117 86
mounted () {
118 87
this.$nextTick().then(() => {
119 -
if (this.mdSyncRoute) {
120 -
this.setActiveItemByRoute()
121 -
} else {
88 +
if (!this.mdSyncRoute) {
122 89
this.setActiveItemByIndex(0)
123 90
}
124 - 125 -
window.setTimeout(() => {
126 -
this.setupWatchers()
127 -
}, 100)
128 91
})
129 92 130 93
}
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4