Skip to content

Commit af565f4

Browse files
marcosmouramarcosmoura
authored
comp(MdTabs): create tabs (#17)
* comp(MdTabs): start creation of tabs * feat(MdTabs): add activetab prop to md-tabs * chore(MdTabs): reinstall libs * feat(MdTabs): make tabs work with Vue Router * feat(MdTabs): add support for transparent tab navigation * feat(MdTabs): add support for tabs with inner content * perf(MdTabs): improve tabs initial time to be ready * perf(MdTabs): add rAF to improve resize check * chore(MdTabs): upgrade CI versions * feat(MdTabs): elevation option for md-tabs * feat(MdTabs): alignment options: left, right, centered and fixed * feat(MdTabs): make tabs work with toolbars * feat(MdTabs): support to icons * feat(MdTabs): disabled tabs * feat(MdTabs): support for custom templates * feat(MdTabs): add events to md-tab
1 parent 35e1c03 commit af565f4

File tree

24 files changed

+1229
-193
lines changed

24 files changed

+1229
-193
lines changed

‎.travis.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ addons:
1010
code_climate:
1111
repo_token: 2bcf2bd351aa016cb70c405b0571f454f353d5150531fb92e6a111634c6e0feb
1212
before_install:
13-
- curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.27.5
13+
- curl -o- -L https://yarnpkg.com/install.sh | bash -s
1414
- export PATH="$HOME/.yarn/bin:$PATH"
15-
- npm i -g npm@5.3.0
15+
- npm i -g npm
1616
install:
1717
- yarn add --dev babel-cli
1818
- yarn

‎build/local/webpack.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { config, resolvePath } from '../config'
77
const componentExampleLoader = require.resolve('./loaders/component-example-loader')
88

99
export default {
10-
devtool: '#cheap-module-eval-source-map',
10+
devtool: '#source-map',
1111
entry: {
1212
docs: [
1313
'./docs/app/index.js',

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,9 @@ export default {
8888
typography: {
8989
title: 'Typography'
9090
},
91+
tabs: {
92+
title: 'Tabs'
93+
},
9194
error: {
9295
title: 'Not Found'
9396
}

‎docs/app/pages/Components/App/examples/LastRowFixed.vue

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,12 @@
1919
</div>
2020

2121
<div class="md-toolbar-row">
22-
<md-button>Home</md-button>
23-
<md-button>Pages</md-button>
24-
<md-button>Posts</md-button>
25-
<md-button>Favorites</md-button>
22+
<md-tabs class="md-primary">
23+
<md-tab id="tab-home" md-label="Home"></md-tab>
24+
<md-tab id="tab-pages" md-label="Pages"></md-tab>
25+
<md-tab id="tab-posts" md-label="Posts"></md-tab>
26+
<md-tab id="tab-favorites" md-label="Favorites"></md-tab>
27+
</md-tabs>
2628
</div>
2729
</md-app-toolbar>
2830

@@ -79,10 +81,6 @@
7981
border: 1px solid rgba(#000, .12);
8082
}
8183
82-
.md-toolbar-row:last-child .md-button {
83-
margin: 4px 0;
84-
}
85-
8684
// Demo purposes only
8785
.md-drawer {
8886
width: 230px;

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<example src="./examples/VueRouter.vue" />
2+
<example src="./examples/Alignments.vue" />
3+
<example src="./examples/TabContent.vue" />
4+
<example src="./examples/Icons.vue" />
5+
<example src="./examples/CustomTemplate.vue" />
6+
7+
<template>
8+
<page-container centered :title="$t('pages.tabs.title')">
9+
<div class="page-container-section">
10+
<p>Lorem ipsum</p>
11+
</div>
12+
13+
<div class="page-container-section">
14+
<h2>Seamless integration with Vue Router</h2>
15+
16+
<code-example title="Router" :component="examples['vue-router']" />
17+
</div>
18+
19+
<div class="page-container-section">
20+
<h2>Tab with inner content</h2>
21+
22+
<code-example title="Content syncing with Router" :component="examples['tab-content']" />
23+
</div>
24+
25+
<div class="page-container-section">
26+
<h2>Alignments</h2>
27+
28+
<code-example title="With different hue colors" :component="examples['alignments']" />
29+
</div>
30+
31+
<div class="page-container-section">
32+
<h2>Icons</h2>
33+
34+
<code-example title="With svg support" :component="examples['icons']" />
35+
</div>
36+
37+
<div class="page-container-section">
38+
<h2>Custom Template</h2>
39+
40+
<code-example title="Template Slot" :component="examples['custom-template']" />
41+
42+
<api-item title="API - md-tabs">
43+
<p>This component do not have any extra option.</p>
44+
</api-item>
45+
</div>
46+
</page-container>
47+
</template>
48+
49+
<script>
50+
import examples from 'docs-mixins/docsExample'
51+
52+
export default {
53+
name: 'Tabs',
54+
mixins: [examples]
55+
}
56+
</script>

‎docs/app/pages/Components/Tabs/examples/Alignments.vue

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div>
3+
Left aligned (default)
4+
<md-tabs>
5+
<md-tab id="tab-home" md-label="Home"></md-tab>
6+
<md-tab id="tab-pages" md-label="Pages"></md-tab>
7+
<md-tab id="tab-posts" md-label="Posts"></md-tab>
8+
<md-tab id="tab-favorites" md-label="Favorites"></md-tab>
9+
</md-tabs>
10+
11+
Centered
12+
<md-tabs class="md-primary" md-alignment="centered">
13+
<md-tab id="tab-home" md-label="Home"></md-tab>
14+
<md-tab id="tab-pages" md-label="Pages"></md-tab>
15+
<md-tab id="tab-posts" md-label="Posts"></md-tab>
16+
<md-tab id="tab-favorites" md-label="Favorites"></md-tab>
17+
</md-tabs>
18+
19+
Right aligned
20+
<md-tabs class="md-accent" md-alignment="right">
21+
<md-tab id="tab-home" md-label="Home"></md-tab>
22+
<md-tab id="tab-pages" md-label="Pages"></md-tab>
23+
<md-tab id="tab-posts" md-label="Posts"></md-tab>
24+
<md-tab id="tab-favorites" md-label="Favorites"></md-tab>
25+
</md-tabs>
26+
27+
Fixed
28+
<md-tabs class="md-transparent" md-alignment="fixed">
29+
<md-tab id="tab-home" md-label="Home"></md-tab>
30+
<md-tab id="tab-pages" md-label="Pages"></md-tab>
31+
<md-tab id="tab-posts" md-label="Posts"></md-tab>
32+
<md-tab id="tab-favorites" md-label="Favorites"></md-tab>
33+
</md-tabs>
34+
</div>
35+
</template>
36+
37+
<script>
38+
export default {
39+
name: 'Example'
40+
}
41+
</script>
42+
43+
<style lang="scss" scoped>
44+
.md-tabs {
45+
margin-bottom: 24px;
46+
}
47+
</style>

‎docs/app/pages/Components/Tabs/examples/CustomTemplate.vue

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<div>
3+
<md-tabs @md-changed="checkNewPosts">
4+
<template slot="md-tab" scope="{ tab }">
5+
{{ tab.label }} <i class="badge" v-if="tab.options.badge">{{ tab.options.badge }}</i>
6+
</template>
7+
8+
<md-tab id="tab-home" md-label="Home"></md-tab>
9+
<md-tab id="tab-pages" md-label="Pages"></md-tab>
10+
<md-tab id="tab-posts" md-label="Posts" :md-template-options="{ badge: newPosts }" @click="clearNewPosts"></md-tab>
11+
<md-tab id="tab-favorites" md-label="Favorites"></md-tab>
12+
</md-tabs>
13+
</div>
14+
</template>
15+
16+
<script>
17+
export default {
18+
name: 'CustomTemplate',
19+
data: () => ({
20+
newPosts: 0,
21+
checkInterval: null
22+
}),
23+
methods: {
24+
clearCheckPosts () {
25+
window.clearInterval(this.checkInterval)
26+
this.checkInterval = null
27+
},
28+
clearNewPosts () {
29+
this.clearCheckPosts()
30+
this.newPosts = 0
31+
},
32+
checkNewPosts (activeTab) {
33+
if (activeTab !== 'tab-posts' && !this.checkInterval) {
34+
this.checkInterval = window.setInterval(() => {
35+
if (this.newPosts === 99) {
36+
this.newPosts = '99+'
37+
this.clearCheckPosts()
38+
} else {
39+
this.newPosts++
40+
}
41+
}, 1000)
42+
}
43+
}
44+
},
45+
mounted () {
46+
this.checkNewPosts()
47+
}
48+
}
49+
</script>
50+
51+
<style lang="scss" scoped>
52+
.badge {
53+
width: 19px;
54+
height: 19px;
55+
display: flex;
56+
justify-content: center;
57+
align-items: center;
58+
position: absolute;
59+
top: 2px;
60+
right: 2px;
61+
background: red;
62+
border-radius: 100%;
63+
color: #fff;
64+
font-size: 10px;
65+
font-style: normal;
66+
font-weight: 600;
67+
letter-spacing: -.05em;
68+
font-family: 'Roboto Mono', monospace;
69+
}
70+
</style>

‎docs/app/pages/Components/Tabs/examples/Icons.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div>
3+
<md-tabs>
4+
<md-tab id="tab-home" md-label="Home" md-icon="home"></md-tab>
5+
<md-tab id="tab-pages" md-label="Pages" md-icon="pages"></md-tab>
6+
<md-tab id="tab-posts" md-label="Posts" md-icon="assets/icon-whatshot.svg"></md-tab>
7+
<md-tab id="tab-favorites" md-label="Favorites" md-icon="favorite"></md-tab>
8+
</md-tabs>
9+
10+
<md-tabs class="md-primary" md-alignment="centered">
11+
<md-tab id="tab-home" md-icon="home"></md-tab>
12+
<md-tab id="tab-pages" md-icon="pages"></md-tab>
13+
<md-tab id="tab-posts" md-icon="assets/icon-whatshot.svg"></md-tab>
14+
<md-tab id="tab-favorites" md-icon="favorite"></md-tab>
15+
</md-tabs>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
name: 'Icons'
22+
}
23+
</script>
24+
25+
<style lang="scss" scoped>
26+
.md-tabs + .md-tabs {
27+
margin-top: 24px;
28+
}
29+
</style>

‎docs/app/pages/Components/Tabs/examples/TabContent.vue

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div>
3+
<md-tabs md-sync-route>
4+
<md-tab id="tab-home" md-label="Home" to="/components/tabs/home">
5+
Home Tab
6+
</md-tab>
7+
8+
<md-tab id="tab-pages" md-label="Pages" to="/components/tabs/pages">
9+
Pages tab
10+
<p>Unde provident nemo reiciendis officia, possimus repellendus. Facere dignissimos dicta quis rem. Aliquam aspernatur dolor atque nisi id deserunt laudantium quam repellat.</p>
11+
</md-tab>
12+
13+
<md-tab id="tab-posts" md-label="Posts" to="/components/tabs/posts">
14+
Posts tab
15+
<p>Qui, voluptas repellat impedit ducimus earum at ad architecto consectetur perferendis aspernatur iste amet ex tempora animi, illum tenetur quae assumenda iusto.</p>
16+
</md-tab>
17+
18+
<md-tab id="tab-favorites" md-label="Favorites" to="/components/tabs/favorites">
19+
Favorites tab
20+
<p>Maiores, dolorum. Beatae, optio tempore fuga odit aperiam velit, consequuntur magni inventore sapiente alias sequi odio qui harum dolorem sunt quasi corporis.</p>
21+
</md-tab>
22+
</md-tabs>
23+
</div>
24+
</template>
25+
26+
<script>
27+
export default {
28+
name: 'TabContent'
29+
}
30+
</script>

‎docs/app/pages/Components/Tabs/examples/VueRouter.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div>
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>
6+
<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>
8+
<md-tab id="tab-disabled" md-label="Disabled" md-disabled></md-tab>
9+
</md-tabs>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
name: 'VueRouter'
16+
}
17+
</script>
18+
19+
<style lang="scss" scoped>
20+
.md-tabs + .md-tabs {
21+
margin-top: 24px;
22+
}
23+
</style>

0 commit comments

Comments
 (0)