Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-04 05:24:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor tab themes

Browse source
This commit is contained in:
Marcos Moura 2016-09-18 14:04:02 -03:00
parent 8ffbc5c3a9
commit d4aece7d43
5 changed files with 205 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/mdTabs/mdTabs.scss
View file

@ -55,17 +55,11 @@ $tab-max-width: 264px;
border: 0;
background: none;
transition: $swift-ease-out;
color: rgba(#fff, .7);
font-family: inherit;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
&.md-active,
&:hover {
color: #fff;
}
&.md-disabled {
cursor: default;
pointer-events: none;

58
src/components/mdTabs/mdTabs.theme
View file

@ -1,14 +1,23 @@
.THEME_NAME {
.md-tabs,
&.md-tabs {
.md-disabled {
color: #{'PRIMARY-CONTRAST-500-0.26'}
}
.md-tabs-navigation {
background-color: #{'PRIMARY-COLOR'};
}
.md-tab-header {
color: #{'PRIMARY-CONTRAST-0.54'};
&.md-active,
&:focus {
color: #{'PRIMARY-CONTRAST-0.99999'};
}
&.md-disabled {
color: #{'PRIMARY-CONTRAST-0.26'}
}
}
.md-tab-indicator {
background-color: #{'ACCENT-COLOR'};
}
@ -18,6 +27,19 @@
background-color: #{'ACCENT-COLOR'};
}
.md-tab-header {
color: #{'ACCENT-CONTRAST-0.54'};
&.md-active,
&:focus {
color: #{'ACCENT-CONTRAST-0.99999'};
}
&.md-disabled {
color: #{'ACCENT-CONTRAST-0.26'}
}
}
.md-tab-indicator {
background-color: #{'BACKGROUND-COLOR'};
}
@ -28,6 +50,19 @@
background-color: #{'WARN-COLOR'};
}
.md-tab-header {
color: #{'WARN-CONTRAST-0.54'};
&.md-active,
&:focus {
color: #{'WARN-CONTRAST-0.99999'};
}
&.md-disabled {
color: #{'WARN-CONTRAST-0.26'}
}
}
.md-tab-indicator {
background-color: #{'BACKGROUND-COLOR'};
}
@ -38,8 +73,21 @@
background-color: transparent;
}
.md-tab-header {
color: #{'BACKGROUND-CONTRAST-0.54'};
&.md-active,
&:focus {
color: #{'PRIMARY-COLOR'};
}
&.md-disabled {
color: #{'BACKGROUND-CONTRAST-0.26'}
}
}
.md-tab-indicator {
background-color: #{'BACKGROUND-COLOR'};
background-color: #{'PRIMARY-COLOR'};
}
}
}

37
src/components/mdTabs/mdTabs.vue
View file

@ -51,6 +51,19 @@
},
watch: {
mdFixed() {
let transitionCounter = 0;
let transitionInterval = window.setInterval(() => {
transitionCounter++;
window.requestAnimationFrame(() => {
this.calculateIndicatorPos(true);
});
if (transitionCounter > 200) {
window.clearInterval(transitionInterval);
}
}, 1);
this.recalculateAllTabsPos();
},
mdCentered() {
@ -110,10 +123,8 @@
ref.style.left = this.$refs.tabContent.offsetWidth * index + 'px';
},
setVisibleTab(ref) {
Vue.nextTick(() => {
this.$refs.tabContent.style.height = ref.offsetHeight + 'px';
ref.classList.add('md-active');
});
this.$refs.tabContent.style.height = ref.offsetHeight + 'px';
ref.classList.add('md-active');
},
changeTab(tabId) {
let idList = Object.keys(this.tabs);
@ -123,9 +134,13 @@
this.tabs[this.activeTab || id].ref.classList.remove('md-active');
this.activeTab = id;
this.activeTabNumber = index;
this.calculateIndicatorPos();
this.calculateTabPos(this.tabs[id].ref, index);
this.setVisibleTab(this.tabs[id].ref);
Vue.nextTick(() => {
this.calculateIndicatorPos();
this.calculateTabPos(this.tabs[id].ref, index);
this.setVisibleTab(this.tabs[id].ref);
});
this.$emit('change', index);
},
handleTabData(data) {
@ -154,9 +169,13 @@
this.$forceUpdate();
this.recalculateAllTabsPos();
},
recalculateAllTabsPos() {
recalculateAllTabsPos(transitionOff) {
if (typeof transitionOff === 'undefined') {
transitionOff = true;
}
window.requestAnimationFrame(() => {
this.calculateIndicatorPos(true);
this.calculateIndicatorPos(!transitionOff);
Object.keys(this.tabs).forEach((tab, index) => {
this.calculateTabPos(this.tabs[tab].ref, index);

6
src/docs/index.js
View file

@ -6,7 +6,8 @@ import VueRouter from 'vue-router';
import './config.js';
import routes from './routes.js';
import App from './App';
import Demo from './components/demo';
import DemoPage from './components/demo-page';
import DemoExample from './components/demo-example';
Vue.use(VueRouter);
@ -18,7 +19,8 @@ let router = new VueRouter({
let Docs = Vue.component('app', App);
Vue.component('demo', Demo);
Vue.component('demo-page', DemoPage);
Vue.component('demo-example', DemoExample);
Docs = new Docs({
el: '#app',

275
src/docs/pages/Tabs.vue
View file

@ -1,177 +1,146 @@
<template>
<demo>
<demo-page>
<div slot="examples">
<md-whiteframe class="example cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Default</h2>
</md-toolbar>
<demo-example label="Default - Grey Theme" size="3" body-theme="grey">
<md-tabs>
<md-tab id="movies" md-label="Movies">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<section>
<md-tabs>
<md-tab id="movies" md-label="Movies">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab id="music" md-label="Music">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab id="music" md-label="Music">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab id="books" md-label="Books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab id="books" md-label="Books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab id="pictures" md-label="Pictures">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</demo-example>
<md-tab id="pictures" md-label="Pictures">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
<demo-example label="Fixed - Accent Color" size="3">
<md-tabs md-fixed class="md-accent">
<md-tab md-label="Movies">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-whiteframe class="example cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Fixed</h2>
</md-toolbar>
<md-tab md-label="Music">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<section>
<md-tabs md-fixed class="md-accent">
<md-tab md-label="Movies">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab md-label="Music">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Pictures">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</demo-example>
<md-tab md-label="Books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<demo-example label="With icons and text - Teal Theme" size="3" body-theme="teal">
<md-tabs md-fixed>
<md-tab md-label="Movies" md-icon="ondemand_video">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Pictures">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
<md-tab md-label="Music" md-icon="music_note">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-whiteframe class="example cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">With icons and text</h2>
</md-toolbar>
<md-tab md-label="Books" md-icon="books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<section v-md-theme="'teal'">
<md-tabs md-fixed>
<md-tab md-label="Movies" md-icon="ondemand_video">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Pictures" md-icon="photo">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</demo-example>
<md-tab md-label="Music" md-icon="music_note">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<demo-example label="Centered with only icon - Transparent Color" size="3">
<md-tabs md-centered class="md-transparent">
<md-tab md-icon="phone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Books" md-icon="books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab md-icon="favorite">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-label="Pictures" md-icon="photo">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
<md-tab md-icon="near_me">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</demo-example>
<md-whiteframe class="example cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Centered with only icon</h2>
</md-toolbar>
<demo-example label="Fixed with only icon - Default Theme" size="3">
<md-tabs md-fixed>
<md-tab md-icon="phone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<section v-md-theme="'green'">
<md-tabs md-centered>
<md-tab md-icon="phone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-icon="favorite">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-icon="favorite">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-icon="near_me">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</demo-example>
<md-tab md-icon="near_me">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
<demo-example label="Playground" size="3">
<div class="playground">
<md-subheader>Tabs Attributes</md-subheader>
<md-checkbox id="fixed" v-model="playground.fixed">Fixed</md-checkbox>
<md-checkbox id="centered" v-model="playground.centered">Centered</md-checkbox>
<md-input-container>
<label for="shadow">Shadow</label>
<md-input type="number" id="shadow" v-model="playground.shadow" min="0" max="24"></md-input>
</md-input-container>
<md-whiteframe class="example cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Fixed with only icon</h2>
</md-toolbar>
<md-subheader>Colors</md-subheader>
<md-radio v-model="playground.color" id="color1" name="color" md-value="0">Default</md-radio>
<md-radio v-model="playground.color" id="color2" name="color" md-value="1">Accent</md-radio>
<md-radio v-model="playground.color" id="color3" name="color" md-value="2">Warn</md-radio>
<md-radio v-model="playground.color" id="color4" name="color" md-value="3">Transparent</md-radio>
<section>
<md-tabs md-fixed>
<md-tab md-icon="phone">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-subheader>Second Tab</md-subheader>
<md-checkbox id="disabled" v-model="playground.tabs[1].disabled">Disabled</md-checkbox>
<md-checkbox id="active" v-model="playground.tabs[1].active">Active</md-checkbox>
</div>
<md-tab md-icon="favorite">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-tab>
<md-tab md-icon="near_me">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
<md-whiteframe class="example cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Playground</h2>
</md-toolbar>
<section>
<div class="playground">
<md-subheader>Tabs Attributes</md-subheader>
<md-checkbox id="fixed" v-model="playground.fixed">Fixed</md-checkbox>
<md-checkbox id="centered" v-model="playground.centered">Centered</md-checkbox>
<md-tabs
:class="{
'md-accent': playground.color === '1',
'md-warn': playground.color === '2',
'md-transparent': playground.color === '3'
}"
:md-fixed="playground.fixed"
:md-centered="playground.centered"
:md-elevation="playground.shadow">
<md-tab v-for="(tab, index) in playground.tabs" :md-label="tab.label" :md-icon="tab.icon" :md-disabled="tab.disabled" :md-active="tab.active">
<md-input-container>
<label for="shadow">Shadow</label>
<md-input type="number" id="shadow" v-model="playground.shadow" min="0" max="24"></md-input>
<label :for="'label' + index">Label</label>
<md-input type="text" :id="'label' + index" v-model="tab.label"></md-input>
</md-input-container>
<md-subheader>Colors</md-subheader>
<md-radio v-model="playground.color" id="color1" name="color" md-value="default">Default</md-radio>
<md-radio v-model="playground.color" id="color2" name="color" md-value="accent">Accent</md-radio>
<md-radio v-model="playground.color" id="color3" name="color" md-value="warn">Warn</md-radio>
<md-subheader>Second Tab</md-subheader>
<md-checkbox id="disabled" v-model="playground.tabs[1].disabled">Disabled</md-checkbox>
<md-checkbox id="active" v-model="playground.tabs[1].active">Active</md-checkbox>
</div>
<md-tabs
:class="{ 'md-accent': playground.color === 'accent', 'md-warn': playground.color === 'warn' }"
:md-fixed="playground.fixed"
:md-centered="playground.centered"
:md-elevation="playground.shadow">
<md-tab v-for="(tab, index) in playground.tabs" :md-label="tab.label" :md-icon="tab.icon" :md-disabled="tab.disabled" :md-active="tab.active">
<md-input-container>
<label :for="'label' + index">Label</label>
<md-input type="text" :id="'label' + index" v-model="tab.label"></md-input>
</md-input-container>
<md-input-container>
<label :for="'icon' + index">Icon</label>
<md-input type="text" :id="'icon' + index" v-model="tab.icon"></md-input>
</md-input-container>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
<md-input-container>
<label :for="'icon' + index">Icon</label>
<md-input type="text" :id="'icon' + index" v-model="tab.icon"></md-input>
</md-input-container>
</md-tab>
</md-tabs>
</demo-example>
</div>
<div slot="code">
@ -189,7 +158,7 @@
Each single tab accept a <code>md-label</code> and/or <code>md-icon</code>. You can set the active tab by setting a parameter <code>md-active</code>.
</p>
</div>
</demo>
</demo-page>
</template>
<style lang="scss">
@ -207,10 +176,6 @@
background-color: #fafafa;
}
.example {
margin-bottom: 16px;
}
.playground {
padding: 0 16px 16px;
@ -226,10 +191,10 @@
data() {
return {
playground: {
color: 'accent',
color: '3',
fixed: false,
centered: true,
shadow: 2,
shadow: 0,
tabs: [
{
label: 'Phone',