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/)
|
The format is based on [Keep a Changelog](http://keepachangelog.com/)
|
||||||
and this project adheres to [Semantic Versioning](http://semver.org/).
|
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
|
## [0.11.1] - 2019-11-26
|
||||||
|
|
||||||
### Fixed
|
### Fixed
|
||||||
|
@ -90,6 +90,41 @@ limitations under the License.
|
|||||||
<mwc-tab icon="camera"></mwc-tab>
|
<mwc-tab icon="camera"></mwc-tab>
|
||||||
</mwc-tab-bar>
|
</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>
|
<h3>With Icons - Stacked</h3>
|
||||||
<mwc-tab-bar activeIndex="1">
|
<mwc-tab-bar activeIndex="1">
|
||||||
<mwc-tab label="one" icon="accessibility" stacked></mwc-tab>
|
<mwc-tab label="one" icon="accessibility" stacked></mwc-tab>
|
||||||
|
@ -43,6 +43,8 @@ export class TabBase extends BaseElement {
|
|||||||
|
|
||||||
@property() icon = '';
|
@property() icon = '';
|
||||||
|
|
||||||
|
@property({type: Boolean}) hasImageIcon = false;
|
||||||
|
|
||||||
@property({type: Boolean}) isFadingIndicator = false;
|
@property({type: Boolean}) isFadingIndicator = false;
|
||||||
|
|
||||||
@property({type: Boolean}) minWidth = false;
|
@property({type: Boolean}) minWidth = false;
|
||||||
@ -90,6 +92,27 @@ export class TabBase extends BaseElement {
|
|||||||
'mdc-tab--min-width': this.minWidth,
|
'mdc-tab--min-width': this.minWidth,
|
||||||
'mdc-tab--stacked': this.stacked,
|
'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`
|
return html`
|
||||||
<button
|
<button
|
||||||
@click="${this._handleClick}"
|
@click="${this._handleClick}"
|
||||||
@ -98,22 +121,12 @@ export class TabBase extends BaseElement {
|
|||||||
aria-selected="false"
|
aria-selected="false"
|
||||||
tabindex="-1">
|
tabindex="-1">
|
||||||
<span class="mdc-tab__content">
|
<span class="mdc-tab__content">
|
||||||
<slot></slot>
|
${iconTemplate}
|
||||||
${
|
${labelTemplate}
|
||||||
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>` :
|
|
||||||
''}
|
|
||||||
${this.isMinWidthIndicator ? this.renderIndicator() : ''}
|
${this.isMinWidthIndicator ? this.renderIndicator() : ''}
|
||||||
</span>
|
</span>
|
||||||
${this.isMinWidthIndicator ? '' : this.renderIndicator()}
|
${this.isMinWidthIndicator ? '' : this.renderIndicator()}
|
||||||
<span class="mdc-tab__ripple" .ripple="${ripple({
|
<span class="mdc-tab__ripple" .ripple="${rippleDirective}"></span>
|
||||||
interactionNode: this,
|
|
||||||
unbounded: false
|
|
||||||
})}"></span>
|
|
||||||
</button>`;
|
</button>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user