+
+
+
+ {{ props.header.icon }}
+
+
+ {{ props.header.label }}
+ {{props.header.options.new_badge}}
+
+
+
+ {{ props.header.label }}
+
+
+
+ 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 class="md-transparent">
+ <template slot="header-item" scope="props">
+ <md-icon v-if="props.header.icon">{{ '\x7b\x7b' }} props.header.icon {{ '\x7d\x7d' }}</md-icon>
+ <template v-if="props.header.options && props.header.options.new_badge">
+ <span v-if="props.header.label" class="label-with-new-badge">
+ {{ '\x7b\x7b' }} props.header.label {{ '\x7d\x7d' }}
+ <span class="new-badge">{{ '\x7b\x7b' }} props.header.options.new_badge {{ '\x7d\x7d' }}</span>
+ </span>
+ </template>
+ <template v-else>
+ <span v-if="props.header.label">{{ '\x7b\x7b' }} props.header.label {{ '\x7d\x7d' }}</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>
+
+
+
+
diff --git a/src/components/mdTabs/mdTab.vue b/src/components/mdTabs/mdTab.vue
index d9e69d3..45325c8 100644
--- a/src/components/mdTabs/mdTab.vue
+++ b/src/components/mdTabs/mdTab.vue
@@ -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,
diff --git a/src/components/mdTabs/mdTabs.vue b/src/components/mdTabs/mdTabs.vue
index 0b08b28..a091642 100644
--- a/src/components/mdTabs/mdTabs.vue
+++ b/src/components/mdTabs/mdTabs.vue
@@ -12,8 +12,10 @@
ref="tabHeader">