diff --git a/README.md b/README.md index 9705d99..2da8e65 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ tabs: minWidth?: boolean isMinWidthIndicator?: boolean stacked?: boolean + persistentID?: string ``` ### Example @@ -131,6 +132,7 @@ See the full list of exposed custom properties: [``](https://github.com | `minWidth` | `false` | Shrinks tab as narrow as possible without causing text to wrap. | | `isMinWidthIndicator` | `false` | Shrinks indicator to be the size of the content. | | `stacked` | `false` | Stacks icon on top of label text. | +| `persistentID` | `""` | Persistent part of `id` for `mwc-tab` element (tab level only) | Global attributes: @@ -199,6 +201,12 @@ tabs: ![Local Attributes](assets/local-attributes.png) + +## Usage of `persistentID` + +Every `mwc-tab` element gets an `id` as a combination of some static part & dynamic part to ensure a unique value of `id`. +A value of an optional `persistentID` option is used to customize the static part which can be useful in card-mod customizations to refer a particular tab. + ## Appreciation Thanks for the support and services provided ![Home Assistant](https://avatars.githubusercontent.com/u/13844975?s=24) [Home Assistant](https://www.home-assistant.io/), ![HACS](https://avatars.githubusercontent.com/u/56713226?s=24) [HACS](https://hacs.xyz/) and ![lit](https://avatars.githubusercontent.com/u/18489846?s=24) [lit](https://lit.dev/) 🥰 Aslo, thanks to the [swipe-card](https://github.com/bramkragten/swipe-card) for inspiration and all of the other open source cards/projects as references. diff --git a/src/tabbed-card.ts b/src/tabbed-card.ts index d998566..cbae297 100644 --- a/src/tabbed-card.ts +++ b/src/tabbed-card.ts @@ -42,6 +42,7 @@ interface Tab { minWidth?: boolean; isMinWidthIndicator?: boolean; stacked?: boolean; + persistentID?: string; }; card: LovelaceCardConfig; } @@ -165,6 +166,12 @@ export class TabbedCard extends LitElement { (tab) => html`