add md-tooltip for tabheader (#171)

* [new] md-tabs improvements : md-tooltip

* [fix] Set the bottom default value on the prop definition
This commit is contained in:
Jérémy TOUZY 2016-12-09 16:55:04 +01:00 committed by Marcos Moura
parent 3e5f930fa7
commit e3f3fda63e
2 changed files with 28 additions and 3 deletions

View file

@ -115,6 +115,18 @@
<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-row>
<md-table-cell>md-tooltip</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Add a tooltip on the tab header. Default: No tooltip.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-tooltip-direction</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Direction of the tab header tooltip. Default: <code>bottom</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
@ -137,7 +149,7 @@
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab id="pictures" md-label="Pictures">
<md-tab id="pictures" md-label="Pictures" md-tooltip="This is the pictures tab!">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
@ -159,7 +171,7 @@
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
&lt;/md-tab&gt;
&lt;md-tab id=&quot;pictures&quot; md-label=&quot;Pictures&quot;&gt;
&lt;md-tab id=&quot;pictures&quot; md-label=&quot;Pictures&quot; md-tooltip=&quot;This is the pictures tab!&quot;&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
&lt;/md-tab&gt;
&lt;/md-tabs&gt;

View file

@ -14,7 +14,12 @@
mdLabel: [String, Number],
mdIcon: String,
mdActive: Boolean,
mdDisabled: Boolean
mdDisabled: Boolean,
mdTooltip: String,
mdTooltipDirection: {
type: String,
default: 'bottom'
}
},
data() {
return {
@ -36,6 +41,12 @@
},
mdLabel() {
this.updateTabData();
},
mdTooltip() {
this.updateTabData();
},
mdTooltipDirection() {
this.updateTabData();
}
},
computed: {
@ -54,6 +65,8 @@
icon: this.mdIcon,
active: this.mdActive,
disabled: this.mdDisabled,
tooltip: this.mdTooltip,
tooltipDirection: this.mdTooltipDirection,
ref: this
};
},