mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-22 14:01:52 +00:00
create table documentation with the new template
This commit is contained in:
Marcos Moura
parent
eaa12ab6b9
commit
c697404470
5 changed files with 291 additions and 387 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<md-card class="example-box">
|
||||
<md-toolbar class="md-dense example-title" v-md-theme="'white'">
|
||||
<md-toolbar class="md-dense" v-md-theme="'white'">
|
||||
<h3 class="md-title">{{ cardTitle }}</h3>
|
||||
</md-toolbar>
|
||||
|
||||
|
|
@ -33,13 +33,9 @@
|
|||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.example-title {
|
||||
border-bottom: 1px solid rgba(#000, .12);
|
||||
|
||||
.md-title {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.md-title {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.example-tabs {
|
||||
|
|
|
|||
|
|
@ -1,375 +1,284 @@
|
|||
<template>
|
||||
<demo-page label="Components - Tabs">
|
||||
<div slot="examples" class="examples">
|
||||
<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>
|
||||
<page-content page-title="Components - Tabs">
|
||||
<docs-component>
|
||||
<div slot="description">
|
||||
<p>Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.</p>
|
||||
<p>The following classes can be applied to change the color palette:</p>
|
||||
<ul class="md-body-2">
|
||||
<li><code>md-accent</code></li>
|
||||
<li><code>md-warn</code></li>
|
||||
<li><code>md-transparent</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div slot="api">
|
||||
<api-table name="md-tabs">
|
||||
<md-table slot="properties">
|
||||
<md-table-header>
|
||||
<md-table-row>
|
||||
<md-table-head>Name</md-table-head>
|
||||
<md-table-head>Type</md-table-head>
|
||||
<md-table-head>Description</md-table-head>
|
||||
</md-table-row>
|
||||
</md-table-header>
|
||||
|
||||
<md-tab id="books" md-label="Books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
<md-table-body>
|
||||
<md-table-row>
|
||||
<md-table-cell>md-fixed</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Make the tabs navigation fixed and elastic filling the whole space. Default <code>false</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<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-table-row>
|
||||
<md-table-cell>md-centered</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Align the tabs navigation to the center. Default <code>false</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<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-table-row>
|
||||
<md-table-cell>md-right</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Align the tabs navigation to the right. Default <code>false</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<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-table-row>
|
||||
<md-table-cell>md-dynamic-height</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Make the tab content to be resized based on the contents. Default <code>true</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-tab md-label="Books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
<md-table-row>
|
||||
<md-table-cell>md-elevation</md-table-cell>
|
||||
<md-table-cell><code>Number</code></md-table-cell>
|
||||
<md-table-cell>Add a shadow on the navigation with an whiteframe. Default <code>0</code></md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</api-table>
|
||||
|
||||
<md-tab md-label="Pictures">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</demo-example>
|
||||
<api-table name="md-tab">
|
||||
<p>You should wrap the <code><md-tab></code> in a <code><md-tabs></code> as a direct parent.</p>
|
||||
<md-table slot="properties">
|
||||
<md-table-header>
|
||||
<md-table-row>
|
||||
<md-table-head>Name</md-table-head>
|
||||
<md-table-head>Type</md-table-head>
|
||||
<md-table-head>Description</md-table-head>
|
||||
</md-table-row>
|
||||
</md-table-header>
|
||||
|
||||
<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-table-body>
|
||||
<md-table-row>
|
||||
<md-table-cell>id</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>Unique id to each tab</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<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-table-row>
|
||||
<md-table-cell>md-label</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>The tab text</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-tab md-label="Books" md-icon="books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
<md-table-row>
|
||||
<md-table-cell>md-icon</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>Icon name on the <a href="https://material.io/icons/" target="_blank" rel="noopener">Material Icons</a> docs.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<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-table-row>
|
||||
<md-table-cell>md-active</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Activate the tab. Default <code>false</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<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-table-row>
|
||||
<md-table-cell>md-disabled</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Disable the tab and prevent his actions. Default <code>false</code></md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</api-table>
|
||||
</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>
|
||||
<div slot="example">
|
||||
<example-box card-title="Default">
|
||||
<div slot="demo">
|
||||
<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 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 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>
|
||||
|
||||
<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>
|
||||
<md-tab id="books" md-label="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 id="pictures" md-label="Pictures">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
|
||||
<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>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<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>
|
||||
<example-box card-title="Fixed with only icons">
|
||||
<div slot="demo">
|
||||
<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>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-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-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="near_me">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</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>
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
|
||||
<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>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<div slot="code">
|
||||
<demo-example label="Default - Grey Theme" body-theme="grey">
|
||||
<code-block lang="xml">
|
||||
<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>
|
||||
<example-box card-title="Centered with Text and Icon">
|
||||
<div slot="demo">
|
||||
<md-tabs md-centered>
|
||||
<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 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 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 id="books" md-label="Books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</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 id="pictures" md-label="Pictures">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<demo-example label="Fixed - Accent Color">
|
||||
<code-block lang="xml">
|
||||
<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>
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
|
||||
<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>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<md-tab md-label="Books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
<example-box card-title="Aligned to the right">
|
||||
<div slot="demo">
|
||||
<md-tabs md-right>
|
||||
<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 md-label="Pictures">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
<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>
|
||||
|
||||
<demo-example label="With icons and text - Teal Theme" body-theme="teal">
|
||||
<code-block lang="xml">
|
||||
<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 id="books" md-label="Books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</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 id="pictures" md-label="Pictures">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</div>
|
||||
|
||||
<md-tab md-label="Books" md-icon="books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
|
||||
<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>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<demo-example label="Centered with only icon - Transparent Color">
|
||||
<code-block lang="xml">
|
||||
<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>
|
||||
<example-box card-title="Playground">
|
||||
<div slot="demo">
|
||||
<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-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-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-tab md-icon="near_me">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
<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>
|
||||
|
||||
<demo-example label="Fixed with only icon - Default Theme">
|
||||
<code-block lang="xml">
|
||||
<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-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-tab md-icon="near_me">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<demo-example label="Playground">
|
||||
<code-block lang="xml">
|
||||
<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>
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
|
||||
<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>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="scss">
|
||||
.playground {
|
||||
padding: 0 16px 16px;
|
||||
|
||||
.md-subheader {
|
||||
padding: 16px 0 0;
|
||||
}
|
||||
}
|
||||
</code-block>
|
||||
|
||||
<code-block lang="javascript">
|
||||
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'
|
||||
};
|
||||
}
|
||||
};
|
||||
</code-block>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
<p>
|
||||
To use Tabs you must wrap all <code><md-tab></code> in a <code><md-tabs></code> as a direct parent.
|
||||
The <code><md-tabs></code> can accept some parameters to modify his styles, like <code>md-fixed</code> and <code>md-centered</code> for example.
|
||||
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-page>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
</div>
|
||||
</docs-component>
|
||||
</page-content>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.playground {
|
||||
padding: 0 16px 16px;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,34 +9,6 @@ $tab-max-width: 264px;
|
|||
flex-flow: column;
|
||||
position: relative;
|
||||
|
||||
&.md-has-icon.md-has-label {
|
||||
.md-tabs-navigation {
|
||||
min-height: 72px;
|
||||
|
||||
.md-icon {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-centered {
|
||||
.md-tabs-navigation {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-right {
|
||||
.md-tabs-navigation {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-fixed {
|
||||
.md-tab-header {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.md-tabs-navigation {
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
|
|
@ -44,6 +16,28 @@ $tab-max-width: 264px;
|
|||
z-index: 1;
|
||||
display: flex;
|
||||
transition: $swift-ease-out;
|
||||
|
||||
&.md-has-icon.md-has-label {
|
||||
min-height: 72px;
|
||||
|
||||
.md-icon {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.md-fixed {
|
||||
.md-tab-header {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.md-tab-header {
|
||||
|
|
|
|||
|
|
@ -22,6 +22,30 @@
|
|||
background-color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
|
||||
&.md-transparent {
|
||||
.md-tabs-navigation {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid #{'BACKGROUND-CONTRAST-0.12'};
|
||||
}
|
||||
|
||||
.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: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
.md-tabs-navigation {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
|
|
@ -67,28 +91,5 @@
|
|||
background-color: #{'BACKGROUND-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-transparent {
|
||||
.md-tabs-navigation {
|
||||
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: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="md-tabs" :class="tabClasses">
|
||||
<md-whiteframe :md-elevation="elevation || 0">
|
||||
<div class="md-tabs-navigation">
|
||||
<div class="md-tabs-navigation" :class="navigationClasses">
|
||||
<button
|
||||
v-for="header in tabs"
|
||||
:key="header.id"
|
||||
|
|
@ -80,11 +80,15 @@
|
|||
},
|
||||
computed: {
|
||||
tabClasses() {
|
||||
return {
|
||||
'md-no-transition': !this.mdDynamicHeight
|
||||
};
|
||||
},
|
||||
navigationClasses() {
|
||||
return {
|
||||
'md-fixed': this.mdFixed,
|
||||
'md-right': !this.mdCentered && this.mdRight,
|
||||
'md-centered': this.mdCentered || this.mdFixed,
|
||||
'md-no-transition': !this.mdDynamicHeight,
|
||||
'md-has-icon': this.hasIcons,
|
||||
'md-has-label': this.hasLabel
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue