mirror of
https://github.com/material-components/material-web.git
synced 2024-09-21 02:27:12 +03:00
feat(tab): lit-to-wiz rules for tab component.
PiperOrigin-RevId: 440997924
This commit is contained in:
parent
cde1b8ee3b
commit
1fe0a19691
@ -11,7 +11,6 @@ const cssClasses = {
|
||||
const strings = {
|
||||
ARIA_SELECTED: 'aria-selected',
|
||||
CONTENT_SELECTOR: '.md3-tab__content',
|
||||
INTERACTED_EVENT: 'MD3Tab:interacted',
|
||||
RIPPLE_SELECTOR: '.md3-tab__ripple',
|
||||
TABINDEX: 'tabIndex',
|
||||
TAB_INDICATOR_SELECTOR: '.md3-tab-indicator',
|
||||
|
@ -9,9 +9,11 @@ import {ClassInfo} from 'lit/directives/class-map';
|
||||
|
||||
import {Tab} from './tab';
|
||||
|
||||
/** @soyCompatible */
|
||||
export class PrimaryTab extends Tab {
|
||||
@property({type: Boolean}) stacked = false;
|
||||
|
||||
/** @soyTemplate */
|
||||
protected override getRootClasses(): ClassInfo {
|
||||
return {
|
||||
...super.getRootClasses(),
|
||||
|
@ -8,7 +8,9 @@ import {ClassInfo} from 'lit/directives/class-map';
|
||||
|
||||
import {Tab} from './tab';
|
||||
|
||||
/** @soyCompatible */
|
||||
export class SecondaryTab extends Tab {
|
||||
/** @soyTemplate */
|
||||
protected override getRootClasses(): ClassInfo {
|
||||
return {
|
||||
...super.getRootClasses(),
|
||||
|
@ -2,9 +2,11 @@
|
||||
* @license
|
||||
* Copyright 2022 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*
|
||||
* @requirecss {tabs.tab.lib.shared_styles}
|
||||
*/
|
||||
|
||||
import '../../tab_indicator/tab-indicator';
|
||||
|
||||
import '../../../focus/focus-ring';
|
||||
import '../../../icon/icon';
|
||||
|
||||
@ -25,6 +27,7 @@ import {TabInteractionEvent, TabInteractionEventDetail} from './types';
|
||||
// used for generating unique id for each tab
|
||||
let tabIdCounter = 0;
|
||||
|
||||
/** @soyCompatible */
|
||||
export class Tab extends BaseElement {
|
||||
static override shadowRootOptions:
|
||||
ShadowRootInit = {mode: 'open', delegatesFocus: true};
|
||||
@ -91,7 +94,8 @@ export class Tab extends BaseElement {
|
||||
this.id = this.id || `md3-tab-${++tabIdCounter}`;
|
||||
}
|
||||
|
||||
protected override render() {
|
||||
/** @soyTemplate */
|
||||
protected override render(): TemplateResult {
|
||||
let iconTemplate: string|TemplateResult = '';
|
||||
if (this.hasImageIcon || this.icon) {
|
||||
iconTemplate = this.renderIcon(this.icon);
|
||||
@ -141,19 +145,21 @@ export class Tab extends BaseElement {
|
||||
};
|
||||
}
|
||||
|
||||
/** @soyTemplate */
|
||||
protected renderIndicator(indicatorIcon: string, isFadingIndicator: boolean):
|
||||
TemplateResult {
|
||||
return html``;
|
||||
}
|
||||
|
||||
/** @soyTemplate */
|
||||
protected renderIcon(icon: string): TemplateResult {
|
||||
return html`<md-icon class="md3-tab__icon"><slot name="icon">${
|
||||
icon}</slot></md-icon>`;
|
||||
}
|
||||
|
||||
// TODO(dfreedm): Make this use selected as a param after Polymer/internal#739
|
||||
/** @soyCompatible */
|
||||
protected renderRipple() {
|
||||
/** @soyTemplate */
|
||||
protected renderRipple(): TemplateResult {
|
||||
return html`<md-ripple></md-ripple>`;
|
||||
}
|
||||
|
||||
@ -179,13 +185,12 @@ export class Tab extends BaseElement {
|
||||
},
|
||||
notifyInteracted: () => {
|
||||
const event: TabInteractionEvent =
|
||||
new CustomEvent<TabInteractionEventDetail>(
|
||||
MDCTabFoundation.strings.INTERACTED_EVENT, {
|
||||
detail: {tabId: this.id},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
cancelable: true,
|
||||
});
|
||||
new CustomEvent<TabInteractionEventDetail>('tab-interaction', {
|
||||
detail: {tabId: this.id},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
cancelable: true,
|
||||
});
|
||||
this.dispatchEvent(event);
|
||||
},
|
||||
getOffsetLeft: () => this.offsetLeft,
|
||||
|
@ -21,10 +21,16 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @soyCompatible
|
||||
* @final
|
||||
* @suppress {visibility}
|
||||
*/
|
||||
@customElement('md-primary-tab')
|
||||
export class MdPrimaryTab extends PrimaryTab {
|
||||
static override styles = [sharedStyles, primaryStyles];
|
||||
|
||||
/** @soyTemplate */
|
||||
protected override renderIndicator(
|
||||
indicatorIcon: string, isFadingIndicator: boolean): TemplateResult {
|
||||
return html`<md-tab-indicator
|
||||
|
@ -21,10 +21,16 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @soyCompatible
|
||||
* @final
|
||||
* @suppress {visibility}
|
||||
*/
|
||||
@customElement('md-secondary-tab')
|
||||
export class MdSecondaryTab extends SecondaryTab {
|
||||
static override styles = [sharedStyles, secondaryStyles];
|
||||
|
||||
/** @soyTemplate */
|
||||
protected override renderIndicator(
|
||||
indicatorIcon: string, isFadingIndicator: boolean): TemplateResult {
|
||||
return html`<md-tab-indicator
|
||||
|
@ -62,8 +62,8 @@ export abstract class TabBar extends BaseElement {
|
||||
return html`
|
||||
<div class="${classMap(this.getRootClasses())}"
|
||||
role="tablist"
|
||||
@MD3Tab:interacted="${this._handleTabInteraction}"
|
||||
@keydown="${this._handleKeydown}">
|
||||
@keydown="${this._handleKeydown}"
|
||||
@tab-interaction="${this._handleTabInteraction}">
|
||||
${this.renderTabScroller()}
|
||||
</div>
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user