Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

allow customize tab item using slot (#596)

Browse source 
Allow customize tab item using slot
This commit is contained in:
vanhoavn 2017-03-21 07:10:23 +07:00 committed by Marcos Moura
parent e2fe0f0743
commit 02f58855f2
4 changed files with 113 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/src/components/ApiTable.vue
View file

@ -20,6 +20,10 @@
<md-tab class="api-tab" md-label="Methods" v-if="$slots.methods">
<slot name="methods"></slot>
</md-tab>
<md-tab class="api-tab" md-label="Slots" v-if="$slots.slots">
<slot name="slots"></slot>
</md-tab>
</md-tabs>
</div>
</template>

95
docs/src/pages/components/Tabs.vue
View file

@ -55,6 +55,22 @@
</md-table-body>
</md-table>
<md-table slot="slots">
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Description</md-table-head>
</md-table-row>
</md-table-header>
<md-table-body>
<md-table-row>
<md-table-cell>header-item</md-table-cell>
<md-table-cell>Change the template of the header item. Optional.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
<md-table slot="events">
<md-table-header>
<md-table-row>
@ -98,6 +114,12 @@
<md-table-cell>The tab text</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-options</md-table-cell>
<md-table-cell><code>any</code></md-table-cell>
<md-table-cell>Any additional options (which can be used in <code>header-item</code> slot of <code>md-tabs</code>)</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-icon</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
@ -314,7 +336,80 @@
</code-block>
</div>
</example-box>
<example-box card-title="Header item templating">
<div slot="demo">
<md-tabs class="md-transparent">
<template slot="header-item" scope="props">
<md-icon v-if="props.header.icon">{{ props.header.icon }}</md-icon>
<template v-if="props.header.options && props.header.options.new_badge">
<span v-if="props.header.label" class="label-with-new-badge">
{{ props.header.label }}
<span class="new-badge">{{props.header.options.new_badge}}</span>
</span>
</template>
<template v-else>
<span v-if="props.header.label">{{ props.header.label }}</span>
</template>
</template>
<md-tab md-icon="phone" md-label="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" md-label="Favorite" :md-options="{new_badge: 3}">
<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" md-label="Near me" :md-options="{new_badge: 1}">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
</div>
<div slot="code">
<code-block lang="xml">
&#x3C;md-tabs class=&#x22;md-transparent&#x22;&#x3E;
&#x3C;template slot=&#x22;header-item&#x22; scope=&#x22;props&#x22;&#x3E;
&#x3C;md-icon v-if=&#x22;props.header.icon&#x22;&#x3E;{{ '\x7b\x7b' }} props.header.icon {{ '\x7d\x7d' }}&#x3C;/md-icon&#x3E;
&#x3C;template v-if=&#x22;props.header.options &#x26;&#x26; props.header.options.new_badge&#x22;&#x3E;
&#x3C;span v-if=&#x22;props.header.label&#x22; class=&#x22;label-with-new-badge&#x22;&#x3E;
{{ '\x7b\x7b' }} props.header.label {{ '\x7d\x7d' }}
&#x3C;span class=&#x22;new-badge&#x22;&#x3E;{{ '\x7b\x7b' }} props.header.options.new_badge {{ '\x7d\x7d' }}&#x3C;/span&#x3E;
&#x3C;/span&#x3E;
&#x3C;/template&#x3E;
&#x3C;template v-else&#x3E;
&#x3C;span v-if=&#x22;props.header.label&#x22;&#x3E;{{ '\x7b\x7b' }} props.header.label {{ '\x7d\x7d' }}&#x3C;/span&#x3E;
&#x3C;/template&#x3E;
&#x3C;/template&#x3E;
&#x3C;md-tab md-icon=&#x22;phone&#x22; md-label=&#x22;Phone&#x22;&#x3E;
&#x3C;p&#x3E;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.&#x3C;/p&#x3E;
&#x3C;/md-tab&#x3E;
&#x3C;md-tab md-icon=&#x22;favorite&#x22; md-label=&#x22;Favorite&#x22; :md-options=&#x22;&#x7B;new_badge: 3&#x7D;&#x22;&#x3E;
&#x3C;p&#x3E;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.&#x3C;/p&#x3E;
&#x3C;p&#x3E;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.&#x3C;/p&#x3E;
&#x3C;/md-tab&#x3E;
&#x3C;md-tab md-icon=&#x22;near_me&#x22; md-label=&#x22;Near me&#x22; :md-options=&#x22;&#x7B;new_badge: 1&#x7D;&#x22;&#x3E;
&#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&#x3C;/p&#x3E;
&#x3C;/md-tab&#x3E;
&#x3C;/md-tabs&#x3E;
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>
</template>
<style>
.label-with-new-badge {
font-weight: bolder;
}
.new-badge {
background-color: red;
color: white;
padding: 3px;
border-radius: 3px;
}
</style>

10
src/components/mdTabs/mdTab.vue
View file

@ -16,6 +16,9 @@
mdIcon: String,
mdActive: Boolean,
mdDisabled: Boolean,
mdOptions: {
default: undefined
},
mdTooltip: String,
mdTooltipDelay: {
type: String,
@ -44,6 +47,12 @@
mdIcon() {
this.updateTabData();
},
mdOptions: {
deep: true,
handler() {
this.updateTabData();
}
},
mdLabel() {
this.updateTabData();
},
@ -71,6 +80,7 @@
id: this.tabId,
label: this.mdLabel,
icon: this.mdIcon,
options: this.mdOptions,
active: this.mdActive,
disabled: this.mdDisabled,
tooltip: this.mdTooltip,

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

@ -12,8 +12,10 @@
ref="tabHeader">
<md-ink-ripple :md-disabled="header.disabled"></md-ink-ripple>
<div class="md-tab-header-container">
<md-icon v-if="header.icon">{{ header.icon }}</md-icon>
<span v-if="header.label">{{ header.label }}</span>
<slot name="header-item" :header="header">
<md-icon v-if="header.icon">{{ header.icon }}</md-icon>
<span v-if="header.label">{{ header.label }}</span>
</slot>
<md-tooltip v-if="header.tooltip" :md-direction="header.tooltipDirection" :md-delay="header.tooltipDelay">{{ header.tooltip }}</md-tooltip>
</div>
</button>