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

Add possibility to have whiteframes inside tabs

Browse source
This commit is contained in:
Marcos Moura 2016-09-12 03:16:10 -03:00
parent 6fc9ed21e9
commit ce42e89a76
3 changed files with 22 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,19 +1,21 @@
<template>
<div class="md-tabs" :class="tabClasses">
<div class="md-tabs-navigation">
<button
v-for="(header, index) in tabs"
type="button"
class="md-tab-header"
:class="{ 'md-active': activeTab === index }"
@click="changeTab(index)"
v-md-ink-ripple
ref="tabHeader">
<md-icon v-if="header.icon">{{ header.icon }}</md-icon>
<span v-if="header.label">{{ header.label }}</span>
</button>
<span class="md-tab-indicator" ref="indicator"></span>
</div>
<md-whiteframe :md-elevation="mdElevation || 0">
<div class="md-tabs-navigation">
<button
v-for="(header, index) in tabs"
type="button"
class="md-tab-header"
:class="{ 'md-active': activeTab === index }"
@click="changeTab(index)"
v-md-ink-ripple
ref="tabHeader">
<md-icon v-if="header.icon">{{ header.icon }}</md-icon>
<span v-if="header.label">{{ header.label }}</span>
</button>
<span class="md-tab-indicator" ref="indicator"></span>
</div>
</md-whiteframe>
<div class="md-tabs-content" ref="tabContent">
<div class="md-tabs-wrapper" ref="tabWrapper">
@ -31,7 +33,8 @@
export default {
props: {
mdFixed: Boolean,
mdCentered: Boolean
mdCentered: Boolean,
mdElevation: [String, Number]
},
data() {
return {

2
src/components/mdWhiteframe/mdWhiteframe.vue
View file

@ -13,7 +13,7 @@
},
data() {
return {
elevation: this.mdElevation || 1
elevation: this.mdElevation === 0 ? 0 : this.mdElevation || 1
};
},
computed: {

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

@ -1,6 +1,6 @@
<template>
<div class="page-content">
<md-tabs class="page-tabs">
<md-tabs md-elevation="2" class="page-tabs">
<md-tab md-label="Examples">
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
@ -121,120 +121,6 @@
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, at ullam. Est expedita doloremque facilis quae, debitis corporis blanditiis impedit laborum vero sit in magnam nobis, velit quia, asperiores minima.</p>
</md-tab>
</md-tabs>
<!-- <md-whiteframe md-elevation="2">
<md-toolbar class="md-dense">
<md-button>Examples</md-button>
<md-button>Code</md-button>
<md-button>API</md-button>
</md-toolbar>
</md-whiteframe>
<div class="main-content">
<md-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Default</h2>
</md-toolbar>
<section>
<md-tabs>
<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="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="Books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</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-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Fixed</h2>
</md-toolbar>
<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="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="Books">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</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-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">With icons and text</h2>
</md-toolbar>
<section>
<md-tabs md-fixed v-md-theme="'teal'">
<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="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-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-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-whiteframe class="cell-phone">
<md-toolbar v-md-theme="'grey'">
<h2 class="md-title">Centered with only icon</h2>
</md-toolbar>
<section>
<md-tabs md-centered v-md-theme="'green'">
<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="near_me">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</section>
</md-whiteframe>
</div> -->
</div>
</template>
@ -242,7 +128,7 @@
.page-tabs {
flex: 1;
> .md-tabs-navigation {
> .md-whiteframe > .md-tabs-navigation {
padding-left: 52px;
}
@ -252,10 +138,9 @@
.cell-phone {
width: 100%;
height: 732px;
max-width: 412px;
height: auto;
margin-right: 16px;
display: inline-block;
position: relative;
overflow: hidden;
border: none;