material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 17:40:40 +03:00
Code Issues Projects Releases Wiki Activity

fix(tabs)!: use md-tab attribute to brand individual tab children

Browse Source 
PiperOrigin-RevId: 568943375
This commit is contained in:
Andrew Jakubowicz 2023-09-27 13:26:36 -07:00 committed by Copybara-Service
parent b591196859
commit 8ec08133af
2 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
tabs/internal/tab.ts
View File

@ -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.
**/

11
tabs/internal/tabs.ts
View File

@ -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');
}