mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +03:00
fix(tabs)!: use md-tab
attribute to brand individual tab children
PiperOrigin-RevId: 568943375
This commit is contained in:
parent
b591196859
commit
8ec08133af
@ -35,6 +35,14 @@ export class Tab extends LitElement {
|
||||
setupHostAria(Tab);
|
||||
}
|
||||
|
||||
/**
|
||||
* The attribute `md-tab` indicates that the element is a tab for the parent
|
||||
* element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`
|
||||
* component that you have an `md-tab` attribute set.
|
||||
*/
|
||||
@property({type: Boolean, reflect: true, attribute: 'md-tab'})
|
||||
readonly isTab = true;
|
||||
|
||||
/**
|
||||
* Whether or not the tab is selected.
|
||||
**/
|
||||
|
@ -45,9 +45,8 @@ export class Tabs extends LitElement {
|
||||
/**
|
||||
* The tabs of this tab bar.
|
||||
*/
|
||||
get tabs() {
|
||||
return this.maybeTabs.filter(isTab);
|
||||
}
|
||||
@queryAssignedElements({flatten: true, selector: '[md-tab]'})
|
||||
readonly tabs!: Tab[];
|
||||
|
||||
/**
|
||||
* The currently selected tab, `null` only when there are no tab children.
|
||||
@ -106,8 +105,6 @@ export class Tabs extends LitElement {
|
||||
@property({type: Boolean, attribute: 'auto-activate'}) autoActivate = false;
|
||||
|
||||
@query('slot') private readonly slotElement!: HTMLSlotElement|null;
|
||||
@queryAssignedElements({flatten: true})
|
||||
private readonly maybeTabs!: HTMLElement[];
|
||||
|
||||
private get focusedTab() {
|
||||
return this.tabs.find(tab => tab.matches(':focus-within'));
|
||||
@ -307,5 +304,5 @@ export class Tabs extends LitElement {
|
||||
}
|
||||
|
||||
function isTab(element: unknown): element is Tab {
|
||||
return element instanceof Tab;
|
||||
}
|
||||
return element instanceof HTMLElement && element.hasAttribute('md-tab');
|
||||
}
|
Loading…
Reference in New Issue
Block a user