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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.
<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="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>
<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>
<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="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>
<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-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>
<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-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>
<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-subheader>Theme</md-subheader>
<md-radio v-model="playground.theme" id="theme1" name="theme" md-value="default">Default</md-radio>
<md-radio v-model="playground.theme" id="theme2" name="theme" md-value="green">Green</md-radio>
<md-radio v-model="playground.theme" id="theme3" name="theme" md-value="cyan">Cyan</md-radio>
<md-radio v-model="playground.theme" id="theme4" name="theme" md-value="brown">Brown</md-radio>
<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>
<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 === '1',
'md-warn': playground.color === '2',
'md-transparent': playground.color === '3'
}"
:md-fixed="playground.fixed"
:md-centered="playground.centered"
:md-elevation="playground.shadow"
v-md-theme="playground.theme">
<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>
.playground {
padding: 0 16px 16px;
.md-subheader {
padding: 16px 0 0;
}
}
export default {
data() {
return {
playground: {
color: '3',
fixed: true,
centered: false,
shadow: 0,
theme: 'default',
tabs: [
{
label: 'Phone',
icon: 'phone',
active: false,
disabled: false
},
{
label: 'Favorites',
icon: 'favorite',
active: false,
disabled: false
},
{
label: 'Near me',
icon: 'near_me',
active: true,
disabled: false
}
]
},
firstTabName: 'Movies'
};
}
};
To use Tabs you must wrap all <md-tab> in a <md-tabs> as a direct parent.
The <md-tabs> can accept some parameters to modify his styles, like md-fixed and md-centered for example.
Each single tab accept a md-label and/or md-icon. You can set the active tab by setting a parameter md-active.