Home

Awesome

Tabbed Card

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

Tabbed Card

Installation

hacs_badge

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

PropertyDefaultDescription
defaultTabIndex0tab 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:

NameDefaultDescription
--mdc-theme-primary--primary-text-colorColor of the activated tab's text, indicator, and ripple.
--mdc-tab-text-label-color-defaultrgba(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-size14pxFont 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: ...

Styling

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

Attributes

NameDefaultDescription
label""Text label to display in tab.
icon""Home Assistant mdi:icon name.
isFadingIndicatorfalseIndicator fades in and out instead of sliding.
minWidthfalseShrinks tab as narrow as possible without causing text to wrap.
isMinWidthIndicatorfalseShrinks indicator to be the size of the content.
stackedfalseStacks 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
  ...

Global Attributes

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

Local Attributes

Appreciation

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