kinghat / tabbed-card

a custom card for home assistant that utilizes tabs to segregate individual cards.

Tabbed Card

A custom card for home assistant that utilizes tabs to segregate individual cards.

Installation

Use HACS or follow this guide

Card Schema

type: custom:tabbed-card
options?:
  defaultTabIndex?: number
styles?:
attributes?:
  label?: string
  icon?: string
  isFadingIndicator?: boolean
  minWidth?: boolean
  isMinWidthIndicator?: boolean
  stacked?: boolean
tabs:
  - card:
      type:
    styles?:
    attributes?:
      label?: string
      icon?: string
      isFadingIndicator?: boolean
      minWidth?: boolean
      isMinWidthIndicator?: boolean
      stacked?: boolean

Example

- type: custom:tabbed-card
  tabs:
    - card:
        type: button
        entity: light.bed_light
        tap_action:
          action: toggle
        show_name: true
        show_icon: true
        show_state: true
      attributes:
        label: Button
    - card:
        type: entities
        title: Air Quality
        entities:
          - air_quality.demo_air_quality_home
          - air_quality.demo_air_quality_office
      attributes:
        label: Air Quality
    - card:
        type: entities
        title: Binary sensor
        entities:
          - binary_sensor.basement_floor_wet
          - binary_sensor.movement_backyard
      attributes:
        label: Binary Sensor
    - card:
        type: entities
        title: Calendar
        entities:
          - entity: calendar.calendar_1
            name: "1"
          - entity: calendar.calendar_2
            name: "2"
      attributes:
        label: Calendar

Configuration

You can apply global and per tab configuration to your card. Global configuration(top level properties) are expressed on all tabs in your card. You can also set local configuration, per tab styles and attributes that take precedence over any corresponding global configuration.

Options

Property	Default	Description
defaultTabIndex	0	tab to display on first render

type: custom:tabbed-card
options:
  defaultTabIndex: 1 # in a 0 based index, the second tab would be the active tab on render
tabs: ...

Styling

This card tries to closely match home assistants default tab styles. You can override and apply additional styling to the card via provided material web components custom properties.

Default Custom Properties:

Name	Default	Description
--mdc-theme-primary	--primary-text-color	Color of the activated tab's text, indicator, and ripple.
--mdc-tab-text-label-color-default	rgba(225, 225, 225, 0.8)	Color of an unactivated tab label. If you want transpareny on the unactivated tabs, you need to use an rgba value incorporating the 4th alpha channel.
--mdc-typography-button-font-size	14px	Font size of the tab label.

type: custom:tabbed-card
styles: # global styles applied to all tabs
  --mdc-theme-primary: yellow
  --mdc-tab-text-label-color-default: orange
tabs: ...

See the full list of exposed custom properties: <mwc-tab>

Attributes

Name	Default	Description
label	""	Text label to display in tab.
icon	""	Home Assistant mdi:icon name.
isFadingIndicator	false	Indicator fades in and out instead of sliding.
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.

Global attributes:

type: custom:tabbed-card
styles:
  ...
attributes:
  icon: mdi:fire # global attribute applied to all tabs
tabs:
  - attributes:
      label: Button
    card:
      type: button
      entity: light.bed_light
      tap_action:
        action: toggle
      show_name: true
      show_icon: true
      show_state: true
  ...

Local attributes:

type: custom:tabbed-card
styles: ...
tabs:
  - attributes:
      label: Button # local attributes that apply only to individual tabs
      icon: mdi:play
    card:
      type: button
      entity: light.bed_light
      tap_action:
        action: toggle
      show_name: true
      show_icon: true
      show_state: true
  - attributes:
      label: Sensors
      icon: mdi:pause
    card:
      type: entities
      title: Sensor
      entities:
        - sensor.carbon_dioxide
        - sensor.carbon_monoxide
        - sensor.outside_humidity
        - sensor.outside_temperature
        - sensor.power_consumption
        - sensor.today_energy
  - attributes:
      label: Air Quality
      icon: mdi:stop
    card:
      type: entities
      title: Air Quality
      entities:
        - air_quality.demo_air_quality_home
        - air_quality.demo_air_quality_office

Appreciation

Thanks for the support and services provided Home Assistant, HACS and lit 🥰 Aslo, thanks to the swipe-card for inspiration and all of the other open source cards/projects as references.

tabbed-card's Issues

Last changed attribute on entities

Hi, is it possible to include the last changed date attribute below the added entities?
Thanks

Default tab index templatable

Hi there! I want to use the tabbed card to select amongst multiple media players. The default tab index should be templatable so, upon first render, HA elects to show me the media player that is, in fact, currently active, or at least on.

Is that possible? Thanks.

Entity picture for tab header

Currently you can have either a label or an icon as tab attribute. IWBN if we could also choose to use an entity picture or a custom picture.

My use case is that I have one map card per tab, with each map tracking a person's location in the last 24 hours. I would like to show each person's entity picture in the tab header instead of a label or an icon. Failing that, letting one point at a custom picture would also work.

Max width on iOS companion app does not match web version....

Thanks for your hard work on this project, it is awesome.

I am having an issue on the companion app that is not scaling the tab headers down as per the web interface.

Here is my code:

styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': white
'--mdc-typography-button-font-size': 11px
'--mdc-tab-height': 24px
'--mdc-tab-horizontal-padding': 0px
attributes:
isMinWidthIndicator: true
minWidth: true
isFadingIndicator: true
options: {}

This is what the web interface looks like (perfect)

But the mobile companion app does not scale the names across the top correctly? Is there a fix for this as all headers should fit nicely, but I am missing the 5th entity tab name and you have to scroll? I have tried taking the font size down to 6px and there is more than ample room to fit the last entity?

Thanks

some cards fail to fully render

I'm quite happy with tabbed-card, but yesterday I felt to make use of
Options:
defaultTabIndex: 1
it's main function works as declared but I got 2 gauges sitting on TAB 0 and since I start with default tab being 1 what happens is that these gauges don't show values any more. Simply the gauge but the name for example 'temperature' but no value nor the unit.

Any idea?
All get's cured if I remove the defaultTabIndex or turn this to 0.

[Request] Add Editor UI

I have been trying to investigate what it would take to add a visual editor to "tabbed-card" but I haven't really used typescript so its an uphill battle. I was reviewing the editor for "lovelace-layout-card". https://github.com/thomasloven/lovelace-layout-card/blob/466df9cb051033881106dfb9029672ac7ea2a2c3/src/layout-card-editor.ts

The minimum that is really needed is the Label, icon, stacked and a cards editor (for the nested cards).

While the "tabbed-card" config itself is not complicated and can be done in YAML easily enough it prevents any and all nested card from using the visual editor. In my case I am nesting a lovelace-layout-card in each tab to give the experience of extra dashboard views nested under each tab.

The editor would certainly make the card more user friendly since it would make using other cards editors easier.

Edit: adding relevant Home Assistant info page.

https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card/

Suggestion: vivid tabs

Currently tabs have no border & background.
I suggest to make tabs more vivid.
It can be done by CSS styles.
Check my proposals below.
I am using card-mod to inject CSS properties.

Current default view with a default theme:

  - type: custom:tabbed-card
    attributes:
      icon: mdi:circle
    tabs:
      - card:
          type: entities
          entities:
            - sun.sun
        attributes:
          label: label 1
      - card:
          type: entity
          entity: sun.sun
        attributes:
          label: label 2

Suggestion:

  - type: custom:mod-card
    card_mod:
      style:
        tabbed-card:
          $: |
            mwc-tab {
              background: var(--ha-card-background, var(--card-background-color, white) );
              border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
              border-width: 1px;
              border-top-left-radius: 12px;
              border-top-right-radius: 12px;
              border-style: solid;
              overflow: hidden;
            }
            section article > * {
              --ha-card-border-radius: 0px 0px 12px 12px;
            }
    card:
      type: custom:tabbed-card
      attributes:
        icon: mdi:circle
      tabs:
        - card:
            type: entities
            entities:
              - sun.sun
          attributes:
            label: label 1
        - card:
            type: entity
            entity: sun.sun
          attributes:
            label: label 2

Ability to control tab height from settings just like font size

Is it possible to change the height of the tabs ?

After changing the font to a smaller font with the option the tab height stays the same.

I would like tabs with less height so i can fit the tabs nicely in my layout / design

Greetings Barry

Fails to render the tabbed card when 1 child card is empty

I have a couple of Upcoming Media Cards tabbed together, and have found that when any one of them is empty (as will happen when I've caught up on shows)
Can't really put a useful screenshot here as there's no error or anything, just an empty card, it doesn't even show the tab bar for the other cards.

I can't really think of any other way to reproduce this issue, so maybe it is specific to Upcoming Media Card, in which case, sorry, probably not significant enough to matter.

Request: Ability to increase gap between labels and content below

Hello there,

More of a request than an issue ... Are you able to include a property/option to set the size of a gap between the bottom of the labels and the content shown below?

Many thanks and good work!

expansion panels blank after adding new card when expanded

So far so good. I did some general testing and noticed that there appears to be a scoping issue associated with the "Local Tab Configuraiton" panel.

To recreate:

1. Add a new card to the dashboard
2. Select Tabbed Card
3. Select any other type of subcard
4. Expand the "local tab configuration" panel
5. Hit the "+" symbol (leave the "local tab configuration" panel expanded)

Now on any tab the "local tab configuration" panel is blank and the contents are flicker on screen when expanding then disappear. Reviewing the HTML with it expanded and retracted the "" contents are present when retracted and shown when expanded.

This bug does not seem to happen if the "local tab configuration" panel is retracted before switching to another tab.

Hopefully this feedback is helpful. Thanks for your hard work!

Originally posted by @Cerothen in #27 (comment)

Tab icon height should be a bit higher

Hi! First of all, great component! I've only got a minor nitpick with the icon height. I believe it should be more center alligned with the text label. In the below example I've added a bottom margin of 8px:

Compared to the default:

I'd make a Pull request if I knew how to code, but sadly I do not.

[FR] Vertical Tab Card

would it be possible to have your card in a vertical layout with styling options to have for example a navigation bar on the side.

Something like this:

Invalid Default Lovelace YAML Config

Hello!

This card is great! I noticed an issue when I set up a new instance of it today that might confuse new users. I am using v0.3.1 via HACS.

When I create a new tabbed card, it defaults to the following YAML:

type: custom:tabbed-card
options: {}
tabs:
  - label: Sun
    card:
      type: entity
      entity: sun.sun

This causes the card's label to be unpopulated!

The solution is to move label under attributes, which you do document well in your README. It would be better if the default YAML config matched the docs.

type: custom:tabbed-card
options: {}
tabs:
  - attributes:
      label: Sun
    card:
      type: entity
      entity: sun.sun

I did notice that when I updated the card's YAML in the mobile editor, it did not immediately display the change to the label on the tab. I had to save, and then it looked correct on the dashboard and when I re-opened the editor.

Best,
Nick

Custom Tab images

Hi have custom made icons for each of my rooms and was wondering is there a way to add them as the icon instead of using the mdi icon set?

Thanks

Nested tabs?

Is there any way to have nested tabs? Like an upper tab bar like now... but for some of the tabs be able to have a secondary row with more tabs?
Thanks!

colors styles dont follow the current theme

Loving this. I'd really like the option to put the tabs at the bottom of the cards.
Also is there a way to have the colors styles follow the current theme?

Thank you, great stuff

Hide as default

Great card - thanks a lot.

futurerequest: is it possible to set the default value to 'hide'? so that only the register is displayed and no content below (all buttons inactive).
In addition, your card 'remembers' the active register despite switching dashboard and reset to hide in x minutes.

Like this:

  - type: custom:tabbed-card
    options:
      defaultTabIndex: hide
      resetToDefault: true #if switch or reload the dashboard
      timeoutToDefault: 5min (or false)

Thanks 🙏

How to change Font Size

How do I change the font size??

Enhancement: More than one card per TAB

It would be great if it would be possible to have more than one card in one tab.

For e.g.:

cards:
  - card: button
    ...
  - card: button
    ...

Feature Request: add haptic feedback

Adding haptic feedback would be amazing, like custom button-card supports this. Works great on iOS and Android devices. This allows the phone to give a vibration on tab press. Choices are:

success, warning, failure, light, medium, heavy, selection

[Feature] Dynamic labels

I think that would be helpful to have dynamic data in label text. Then if you have multiple tabs (eg. various temperature graphs in each of them). You can see current temperature directly in the label. That will save you some time if, at the moment, you need only current state and not full card.

I've provided sample implementation here: #92 - fell free to let me know, what do you think about it.

Bug: Tabbed Card forces following card beneath it

If you have multiple Cards on your Dashboard the Card that comes after the tabbed card is forced to stay below the tabbed card even if the window size would allow them to be rendered next to each other. See attachment_1
If you change the order they get rendered as you would expect it. See attachment_2

Icons do not respect "--mdc-tab-text-label-color-default" style

The icons not respect the "--mdc-theme-primary:" style attribute. Color works for "--mdc-theme-primary" style attribute but not the other.
this is the code:

type: custom:tabbed-card
attributes:
  min_width: true
styles:
  '--mdc-theme-primary': yellow
  '--mdc-tab-text-label-color-default': red
tabs:
  - attributes:
      icon: mdi:view-dashboard
    card:
       .....
  - attributes: 
       label: 1
    card:
      ......

This yeilds this with tab 1 (icon) active:

and this with tab 2 active:

Hope this helps.
the css for an active tab looks like this

.mdc-tab--active .mdc-tab__icon {
    color: var(--mdc-theme-primary, #6200ee);
}

and the non active tab looks like this

.mdc-tab:not(.mdc-tab--active) .mdc-tab__icon {
    color: var(--mdc-tab-color-default, rgba(0, 0, 0, 0.54));
}

So this may be an issue with mdc-tab, not sure but thought you should know.

Attributes not working

I real love this componet but the attributes section does not function as described in the readme,

type: custom:tabbed-card
tabs:
  - label: 2
    card:

function fine but

type: custom:tabbed-card
tabs:
  - attributes:
      label: 2 # local attributes that apply only to individual tabs
      icon: mdi:play
    card:

produces a tab with out any label or icon.

Any help would be greatly appreciated.
Keep up the great work,

Oh this is happenning on HA 2022.10.0
with the pluggin added through HACS

Feature Requests: remove force CAP and add center align and icon color

Hi,

So I really dig this custom card! I used state-switch with custom button cards to create own tabs, but this card makes it a lot easier and manageable, great work! One thing I notice I hope to see changed is the labels. Everything is forced in CAPS while I want it to be case sensitive. Could you change it so the label is identical to the input? This way people can decide themselves if they want all caps, lower caps or start with a cap.

Also I notice the label and icon are not aligned in the center. It's now aligned at the top, which makes it look kinda messy.

Also, the style option only affects the text-color, but not the icon. Could you also provide a variable to alter the icon color?
Currently the text changes color, but the icon is hardcoded (the unselected tab). When I use a dark mode theme, the icon becomes invisible due to the hardcoded color.

No tab titles

I have the macos-ui-theme installed (not sure if that's the problem) and the tab titles are missing:

This might be because there was no label rendered in HTML:

This is the source:

type: custom:tabbed-card
tabs:
  - label: Täglich
    card:
      type: custom:weather-card
      number_of_forecasts: '5'
      current: true
      details: false
      forecast: true
      hourly_forecast: false
      entity: weather.bremen_daily
  - label: Stündlich
    card:
      type: custom:hourly-weather
      entity: weather.bremen_hourly
      num_segments: '8'
      icons: true
      label_spacing: '2'
      name: Stündliches Wetter
      show_precipitation_amounts: true
      offset: '0'
      show_precipitation_probability: true

Tabbed Card + Multiple Entity Row

When I try to use the Multiple Entity Row I get an error.

type: custom:tabbed-card
styles: ...
tabs:
  - attributes:
      label: Übersicht
    card:
      type: entities
entities:
  - entity: sensor.processor_temperature
    state_header: Temperatur
    type: custom:multiple-entity-row
    name: CPU

If anyone has an idea how to fix this, the combination of the two would be just awesome.

FR: add tooltip

please consider adding a tooltip option to the tabs.
Using an icon only tabbed config (because the labels are not resizable and force us to swipe the tabs) it would be really nice to have a tooltip on hovering.
Just like the tooltip in the main header bar

if it could be done with configurable transition, even better

using this myself on all button-cards to give you an idea:

  styles:
    tooltip:
      - transition: opacity 0.5s. # <-- main concern here, and makes the tooltip immediate
      - color: var(--card-background-color)
      - font-size: 12px
      - background: var(--primary-color)
      - padding: 5px
      - border-width: 0px

thanks for considering!

styles: unactivated icons not inheriting default styling

unactivated tab icons are not being styled with the default ha styling because the --mdc-tab-color-default custom property isnt set.

Icon color of inactive tab is hardcoded / can't be changed

Hi, an issue I noticed: the style option only affects the text-color, but not the icon. Could you also provide a variable to alter the icon color, for instance like: --mdc-tab-icon-color-default: red

Currently the text changes color, but the icon is hardcoded (the unselected tab). When I use a dark mode theme, the icon becomes invisible due to the hardcoded color.

Bug: Card not updating in preview

Trying to set up the tabbed card and for the life of me couldn't figure out why it's not displaying name or icon in the tab

I re-downloaded the card through HACS which got it to show up, but now I'm noticing that every time I make changes to the card the preview doesn't update until I save it

Icon not vertically centered

Compare these variants:

The 2nd variant is a default view, the 1st variant is styled by card-mod:

type: vertical-stack
cards:
  - type: custom:mod-card
    card_mod:
      style:
        tabbed-card $:
          mwc-tab: |
            ha-icon {
              display: inline-flex;
            }
    card:
      type: custom:tabbed-card
      attributes:
        icon: mdi:circle
      tabs: &ref_tabs
        - card:
            type: entities
            entities:
              - sun.sun
          attributes:
            label: label 1
        - card:
            type: entity
            entity: sun.sun
          attributes:
            label: label 2
  - type: custom:tabbed-card
    attributes:
      icon: mdi:circle
    tabs: *ref_tabs

I suggest to use the display: inline-flex style as a default.

docs: missing local styling

add a distinction between global and local styles like is done with attributes.

I cant see the label of the tabs

I'm trying to create a tabbed card for my remotes, each card is vertical stack of horizontal stacks with buttons
I see the tab at the top but the label is not showing, i tried to change the color and font size with the styles but it only changed the color of the ident of the tab and resizing didn't seem to have any affect

I'm using latest HA version (2022.12.0) and I installed manually (added all of the files in SRC folder to resources and the latest release tabbed-card.js).

feature: implement a gooey config editor

add the gui config editor for those that dont manage card configs via yaml

Conditional tab or conditional tab-headline

Hi there,
is it possible to use the "conditional card" together with the "tabbed card"?

Basically: Could one have a given tab only appear if a given condition is met? Alternatively, I assume one could use conditional cards within a tab. In that case, could one have the tab's headline be formated based on a certain condition? For example: have its background be green if a certain condition is met and red if it's not met.

minWidth: true doesn't not minimize width to icon size

not sure if (where) we've discussed this before, so please allow me a dedicated issue on the matter.

using a main

type: custom:tabbed-card
attributes:
  minWidth: true
  isMinWidthIndicator: true

config one a set of tabbed cards only using an icon in the tab, still makes the card tabs go beyond the width of a single card, and added to that, we can not swipe it really. the overflow icon somewhat comes in sight when the one next to it is activated, but there's no real swiping the tabs

Maybe I am misconfiguring, if so please correct, but I would have hoped that 4 or 5 icons only should be able to be seen directly and not have it look like:

seems the minWidth indicator is working correctly, because this is without. As you can see, the tabs are just as wide in both configurations.

of course, I have also tried to set that option on the card itself:

    attributes:
      icon: mdi:home-roof
      minWidth: true

to no avail though, no difference at all
Please have a look why those tabs are not tighter, just as tight as the indicator

[Feature Request] Remember active tab

Great card its really been helping tie some of the views together nicely.

One thing that would be nice if the location.hash property was set (or something) so that the selected tab was remembered. Sometimes the app or page refreshes (when coming back) and it doesnt remember which tab was currently being utilized.

Thanks for the quality work!

Tab outline

Please consider making the outline for the card, and the active tab, more like the traditionally tab outline.

Feature request: Hide empty tabs

Feature request:

Would nice to have an option to hide tabs that are empty.

attributes?:
  hideIfEmpty?: boolean

I'm using type: custom:auto-entities so the card can potentially be empty.

tabs:
  - card:
      type: custom:auto-entities
      card:

Dropdown (input_select) truncated by card with no way to scroll

Thanks for all of your work on this! I'm using an input_select dropdown, but the options are chopped off at the bottom of the card. Perhaps this is a limit of HA, but is there a workaround to scroll the through the list? See attached picture for example.

Remove focused background?

Loving this addition.. thanks for you work on this!!

When changing tabs, I see that the 'active' or 'focused' background stays. However, when clicking outside of the area, the focused background is removed.

How do I remove this background entirely?

Demo:

Does not tab in certain browsers

I cannot get the other tabs to show in Google Chrome; it never leaves the first tab. HA iOS app and Safari on Mac do work, though.

Home Assistant 2022.12.6
Supervisor 2022.12.1
Operating System 9.4
Frontend 20221213.0 - latest

Let me know if you need further info.

Labels blank

When I updated to v0.3.0 ,the labels are blank. When I downgraded to v0.2.0, they are fine.

How do change text from Capitals to Proper?

feature: set card size to largest tab

the card currently doesnt set a constant size of the largest tab so it dynamically adjusts for each tab. add a static size option that sets the size of the card to the largest card in the config.

Feature request: Style individual tabs

Feature request:

Style individual tabs.
Would be nice to be able to give individual tabs different colors

tabs:
  - card:
      ...
    styles:
      --mdc-theme-primary: rgba(255,255,0)
      --mdc-tab-text-label-color-default: rgba(255,255,255,0.8)
  - card:
      ...
    styles:
      --mdc-theme-primary: rgba(255,180,0)
      --mdc-tab-text-label-color-default: rgba(255,180,0,0.6)

Doesnt work with "Simple Thermostat"

Hi,

there is a Bug with Simple Thermostat.

If I use "type: custom:simple-thermostat" the Tab with Simple Thermostat shows Nothing below the Tab. If I change the type to "thermostat" or "custom:better-thermostat-ui-card" it works fine.

type: custom:tabbed-card
tabs:
  - attributes:
      label: Bad
    card:
      type: vertical-stack
      cards:
        - type: custom:vertical-stack-in-card
          cards:
            - type: custom:better-thermostat-ui-card
              entity: climate.bad_bt
              disable_window: true
              name: Bad
              eco_temperature: 19
            - type: glance
              show_icon: true
              show_name: false
              entities:
                - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening
                - entity: binary_sensor.shellyflood_349454713515_flood
  - attributes:
      label: Wohnzimmer
    card:
      type: vertical-stack
      cards:
        - type: custom:vertical-stack-in-card
          cards:
            - type: custom:simple-thermostat
              entity: climate.heizung
            - type: glance
              show_icon: true
              show_name: false
              entities:
                - entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening
                - entity: binary_sensor.shellyflood_349454713515_flood
  - attributes:
      label: Arbeitszimmer
    card:
      type: vertical-stack
      cards:
        - type: custom:vertical-stack-in-card
          cards:
            - type: thermostat
              entity: climate.heizung_az
              header: null
            - type: glance
              show_icon: false
              entities:
                - entity: sensor.heizung_az_next_scheduled_change_time
                  name: Änderung
                - entity: sensor.heizung_az_comfort_temperature
                  name: Komfort
                - entity: sensor.heizung_az_eco_temperature
                  name: Eco

Add visual editor support

I absolutely love this custom card because it keeps my dashboard nice and tidy, but editing the YAML gets tiresome after a while. Any chance of eventually adding in visual editor support, a bit like what the Home Assistant vertical / horizontal stack cards offer?