mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
Merge pull request #671 from material-components:mwc-tab-styles
PiperOrigin-RevId: 283652556
This commit is contained in:
commit
708f707caa
13
CHANGELOG.md
13
CHANGELOG.md
@ -4,7 +4,18 @@ All notable changes to this project will be documented in this file.
|
||||
The format is based on [Keep a Changelog](http://keepachangelog.com/)
|
||||
and this project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
<!-- ## Unreleased -->
|
||||
## Unreleased
|
||||
|
||||
### Fixed
|
||||
|
||||
- **BREAKING:VISUAL** `mwc-tab` will now automatically size slotted images. Also
|
||||
slotted image will override icon font.
|
||||
|
||||
### Changed
|
||||
|
||||
- **BREAKING** `mwc-tab` can now only have slotted content via the
|
||||
`hasImageIcon` flag.
|
||||
|
||||
## [0.11.1] - 2019-11-26
|
||||
|
||||
### Fixed
|
||||
|
@ -90,6 +90,41 @@ limitations under the License.
|
||||
<mwc-tab icon="camera"></mwc-tab>
|
||||
</mwc-tab-bar>
|
||||
|
||||
<h3>Image Icons</h3>
|
||||
<mwc-tab-bar activeIndex="2">
|
||||
<mwc-tab hasImageIcon>
|
||||
<svg width="10px" height="10px">
|
||||
<circle
|
||||
r="5px"
|
||||
cx="5px"
|
||||
cy="5px"
|
||||
color="red">
|
||||
</circle>
|
||||
</svg>
|
||||
</mwc-tab>
|
||||
<mwc-tab hasImageIcon>
|
||||
<svg width="10px" height="10px">
|
||||
<rect
|
||||
width="10px"
|
||||
height="10px"
|
||||
color="green">
|
||||
</rect>
|
||||
</svg>
|
||||
</mwc-tab>
|
||||
<mwc-tab hasImageIcon>
|
||||
<svg width="14.143px" height="14.143px">
|
||||
<rect
|
||||
width="10px"
|
||||
height="10px"
|
||||
color="blue"
|
||||
y="2.071px"
|
||||
x="2.071px"
|
||||
style="transform:rotate(45deg);transform-origin:center;">
|
||||
</rect>
|
||||
</svg>
|
||||
</mwc-tab>
|
||||
</mwc-tab-bar>
|
||||
|
||||
<h3>With Icons - Stacked</h3>
|
||||
<mwc-tab-bar activeIndex="1">
|
||||
<mwc-tab label="one" icon="accessibility" stacked></mwc-tab>
|
||||
|
@ -43,6 +43,8 @@ export class TabBase extends BaseElement {
|
||||
|
||||
@property() icon = '';
|
||||
|
||||
@property({type: Boolean}) hasImageIcon = false;
|
||||
|
||||
@property({type: Boolean}) isFadingIndicator = false;
|
||||
|
||||
@property({type: Boolean}) minWidth = false;
|
||||
@ -90,6 +92,27 @@ export class TabBase extends BaseElement {
|
||||
'mdc-tab--min-width': this.minWidth,
|
||||
'mdc-tab--stacked': this.stacked,
|
||||
};
|
||||
|
||||
let iconTemplate = html``;
|
||||
if (this.hasImageIcon || this.icon) {
|
||||
// NOTE: MUST be on same line as spaces will cause vert alignment issues
|
||||
// in IE
|
||||
iconTemplate = html`
|
||||
<span class="mdc-tab__icon material-icons"><slot>${
|
||||
this.icon}</slot></span>`;
|
||||
}
|
||||
|
||||
let labelTemplate = html``;
|
||||
if (this.label) {
|
||||
labelTemplate = html`
|
||||
<span class="mdc-tab__text-label">${this.label}</span>`;
|
||||
}
|
||||
|
||||
const rippleDirective = ripple({
|
||||
interactionNode: this,
|
||||
unbounded: false,
|
||||
});
|
||||
|
||||
return html`
|
||||
<button
|
||||
@click="${this._handleClick}"
|
||||
@ -98,22 +121,12 @@ export class TabBase extends BaseElement {
|
||||
aria-selected="false"
|
||||
tabindex="-1">
|
||||
<span class="mdc-tab__content">
|
||||
<slot></slot>
|
||||
${
|
||||
this.icon ? html`
|
||||
<span class="mdc-tab__icon material-icons">${this.icon}</span>` :
|
||||
''}
|
||||
${
|
||||
this.label ? html`
|
||||
<span class="mdc-tab__text-label">${this.label}</span>` :
|
||||
''}
|
||||
${iconTemplate}
|
||||
${labelTemplate}
|
||||
${this.isMinWidthIndicator ? this.renderIndicator() : ''}
|
||||
</span>
|
||||
${this.isMinWidthIndicator ? '' : this.renderIndicator()}
|
||||
<span class="mdc-tab__ripple" .ripple="${ripple({
|
||||
interactionNode: this,
|
||||
unbounded: false
|
||||
})}"></span>
|
||||
<span class="mdc-tab__ripple" .ripple="${rippleDirective}"></span>
|
||||
</button>`;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user