Hi all,Tabbed Card How to setup a Tabbed Card
type: custom:tabbed-card
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': grey
'--mdc-typography-button-font-size': 14px
'--mdc-tab-stacked-height': 55px
'--mdc-tab-height': 40px
tabs:
- attributes:
label: Lampen
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: light
entity: light.sonoff_8s20
name: Keukenkast
- type: light
entity: light.sonoff_3s20
name: Takjes lamp
- type: light
entity: light.sonoff_7s20
name: Kerstboom
- card:
type: entities
title: Temperaturen
entities:
- entity: sensor.temperatuur_sensor_woonkamer_temperature
name: Temp. woonkamer
- entity: sensor.temperatuur_sensor_wk_am_temperature
name: Temp. Wk. Anne-Marie
- entity: sensor.multisensor_werkkamer_bert_temperature
name: Temp. Wk. Bert
attributes:
label: Temperaturen
- card:
type: entities
title: Calendar
entities:
- entity: calendar.bert
name: '1'
- entity: calendar.bl45
name: '2'
attributes:
label: Calendar
I tried to use Grid Card and Vertical Stack Card but I can’t manage to combine these with the Tabbed Card to create f.i. two rows with three tabs.
1 Like
kbrown01
March 7, 2023, 10:11pm
2
You mean like this?
Actually three layers deep in places. There you have NHL->NHL STANDINGS->CONFERENCE
I was just searching because I am looking for how to make these appear like “tabs”. I want to change background color for the active tabe set and I cannot figure that out
Hi @kbrown01 That is an incredible huge tabbed view! I would love to see how you made this. Three layers of tabs, that is more than i need, but i would love to see your YAML code, so i could use bits and pieces.
kbrown01
March 8, 2023, 11:17pm
4
This is the whole dashboard code. It uses many things (decluttering, TeamTracker, Flex Table, other cards). But can carve it back to layers. The Stats have three layers (SPORT->STANDINGS->TYPE OF STANDNG) while the PRE, IN, POST game views have two layers (SPORT->GAME STATS)
decluttering_templates:
nhl_settings:
card:
type: custom:flex-table-card
title: '[[title]]'
css:
table+: 'padding: 0px; width: 1600px;'
tbody tr td:first-child: 'width: 20%;'
tbody tr td:nth-child(n+2): 'width: 5%;'
tbody tr:hover: 'background-color: lightgreen!important;'
tbody tr td:nth-child(6): 'background-color: #E3F5D4;'
card_mod:
style: |
ha-card {
overflow: auto;
}
$: |
.card-header {
padding: 12px 0px 8px 4px!important;
font-size: 16px!important;
line-height: 18px!important;
font-weight: bold!important;
}
entities:
include: '[[entity]]'
sort_by: entries-
columns:
- hidden: true
data: entries
modify: x.stats[6].value
- name: Team
data: entries
modify: x.team.displayName
- name: GP
data: entries
modify: x.stats[3].displayValue
- name: W
data: entries
modify: x.stats[10].displayValue
- name: L
data: entries
modify: x.stats[4].displayValue
- name: OTL
data: entries
modify: x.stats[11].displayValue
- name: PTS
data: entries
modify: x.stats[6].displayValue
- name: RW
data: entries
modify: x.stats[14].displayValue
- name: ROW
data: entries
modify: x.stats[15].displayValue
- name: SOW
data: entries
modify: x.stats[17].displayValue
- name: SOL
data: entries
modify: x.stats[16].displayValue
- name: HOME
data: entries
modify: x.stats[19].displayValue
- name: AWAY
data: entries
modify: x.stats[20].displayValue
- name: GF
data: entries
modify: x.stats[8].displayValue
- name: GA
data: entries
modify: x.stats[7].displayValue
- name: DIFF
data: entries
modify: x.stats[13].displayValue
- name: L10
data: entries
modify: x.stats[21].summary
- name: STRK
data: entries
modify: x.stats[9].displayValue
mlb_settings:
card:
type: custom:flex-table-card
title: '[[title]]'
css:
table+: 'padding: 0px'
tbody tr td:first-child: 'width: 20%;'
tbody tr td:nth-child(n+2): 'width: 5%;'
tbody tr:hover: 'background-color: lightgreen!important;'
tbody tr td:nth-child(6): 'background-color: #E3F5D4;'
card_mod:
style:
$: |
.card-header {
padding: 12px 0px 8px 4px!important;
font-size: 16px!important;
line-height: 18px!important;
font-weight: bold!important;
}
entities:
include: '[[entity]]'
sort_by: entries-
columns:
- hidden: true
data: entries
modify: x.stats[16].value
- name: Team
data: entries
modify: x.team.displayName
- name: GP
data: entries
modify: x.stats[7].displayValue
- name: W
data: entries
modify: x.stats[17].displayValue
- name: L
data: entries
modify: x.stats[9].displayValue
- name: T
data: entries
modify: x.stats[15].displayValue
- name: PCT
data: entries
modify: x.stats[16].displayValue
- name: GB
data: entries
modify: x.stats[6].displayValue
- name: PS
data: entries
modify: x.stats[10].displayValue
- name: HOME
data: entries
modify: x.stats[33].displayValue
- name: AWAY
data: entries
modify: x.stats[34].displayValue
- name: RS
data: entries
modify: x.stats[13].displayValue
- name: RA
data: entries
modify: x.stats[12].displayValue
- name: DIFF
data: entries
modify: x.stats[27].displayValue
- name: L10
data: entries
modify: x.stats[37].summary
- name: STRK
data: entries
modify: x.stats[14].displayValue
nfl_settings:
card:
type: custom:flex-table-card
title: '[[title]]'
css:
table+: 'padding: 0px'
tbody tr td:first-child: 'width: 2%;'
tbody tr td:nth-child(2): 'width: 20%;'
tbody tr td:nth-child(n+3): 'width: 6%;'
tbody tr:hover: 'background-color: lightgreen!important;'
tbody tr td:nth-child(7): 'background-color: #E3F5D4;'
card_mod:
style:
$: |
.card-header {
padding: 12px 0px 8px 4px!important;
font-size: 16px!important;
line-height: 18px!important;
font-weight: bold!important;
}
sort_by: entries-
entities:
include: '[[entity]]'
columns:
- hidden: true
data: entries
modify: x.stats[9].displayValue
- name: C
data: entries
modify: x.stats[0].displayValue
- name: Team
data: entries
modify: x.team.displayName
- name: GP
data: entries
modify: x.stats[10].value + x.stats[3].value + x.stats[8].value
- name: W
data: entries
modify: x.stats[10].displayValue
- name: L
data: entries
modify: x.stats[3].displayValue
- name: T
data: entries
modify: x.stats[8].displayValue
- name: PCT
data: entries
modify: x.stats[9].displayValue
- name: HOME
data: entries
modify: x.stats[16].displayValue
- name: AWAY
data: entries
modify: x.stats[17].displayValue
- name: DIV
data: entries
modify: x.stats[18].displayValue
- name: CONF
data: entries
modify: x.stats[19].displayValue
- name: PF
data: entries
modify: x.stats[6].displayValue
- name: PA
data: entries
modify: x.stats[5].displayValue
- name: DIFF
data: entries
modify: x.stats[1].displayValue
- name: STRK
data: entries
modify: x.stats[7].displayValue
nba_settings:
card:
type: custom:flex-table-card
title: '[[title]]'
css:
table+: 'padding: 0px'
tbody tr td:first-child: 'width: 2%;'
tbody tr td:nth-child(2): 'width: 20%;'
tbody tr td:nth-child(n+3): 'width: 6%;'
tbody tr:hover: 'background-color: lightgreen!important;'
tbody tr td:nth-child(5): 'background-color: #E3F5D4;'
card_mod:
style:
$: |
.card-header {
padding: 12px 0px 8px 4px!important;
font-size: 16px!important;
line-height: 18px!important;
font-weight: bold!important;
}
sort_by: entries+
entities:
include: '[[entity]]'
columns:
- hidden: true
data: entries
modify: x.stats[4].displayValue
- name: PS
data: entries
modify: x.stats[7].displayValue
- name: Team
data: entries
modify: x.team.displayName
- name: W
data: entries
modify: x.stats[10].displayValue
- name: L
data: entries
modify: x.stats[6].displayValue
- name: GB
data: entries
modify: x.stats[4].displayValue
- name: HOME
data: entries
modify: x.stats[12].displayValue
- name: AWAY
data: entries
modify: x.stats[13].displayValue
- name: DIV
data: entries
modify: x.stats[14].displayValue
- name: CONF
data: entries
modify: x.stats[15].displayValue
- name: PPG
data: entries
modify: x.stats[1].displayValue
- name: OPP PPG
data: entries
modify: x.stats[0].displayValue
- name: DIFF
data: entries
modify: x.stats[2].displayValue
- name: STRK
data: entries
modify: x.stats[8].displayValue
- name: L10
data: entries
modify: x.stats[16].displayValue
game_stats:
card:
type: custom:auto-entities
unique: true
show_empty: false
card:
type: custom:layout-card
layout_type: masonry
card_param: cards
filter:
template: |
{%- for team in integration_entities("teamtracker") -%}
{%- if state_attr(team, "league") == "[[sport]]" -%}
{%- if states(team) == "[[status]]" -%}
{%- if state_attr(team, "team_homeaway") == "home" -%}
{{{"type": "custom:teamtracker-card",
"entity": team }}},
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
exclude:
- entity_id: '*team_tracker*'
sort:
method: attribute
attribute: date
views:
- theme: Backend-selected
title: Sports
type: panel
icon: mdi:strategy
badges: []
cards:
- type: custom:tabbed-card
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': gray
'--mdc-typography-button-font-size': 12px
tabs:
- attributes:
label: NHL
icon: mdi:ballot
minWidth: true
isMinWidthIndicator: true
isFadingIndicator: true
card:
type: custom:tabbed-card
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': gray
'--mdc-typography-button-font-size': 12px
tabs:
- attributes:
label: NHL Standings
icon: mdi:ballot
minWidth: true
isMinWidthIndicator: true
isFadingIndicator: true
card:
type: custom:tabbed-card
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': gray
'--mdc-typography-button-font-size': 12px
tabs:
- attributes:
label: Divisional
minWidth: true
isMinWidthIndicator: true
isFadingIndicator: true
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:decluttering-card
template: nhl_settings
variables:
- title: Eastern Atlantic
- entity: sensor.nhl_east_atlantic
- type: custom:decluttering-card
template: nhl_settings
variables:
- title: Eastern Metropolitan
- entity: sensor.nhl_east_metropolitan
- type: custom:decluttering-card
template: nhl_settings
variables:
- title: West Central
- entity: sensor.nhl_west_central
- type: custom:decluttering-card
template: nhl_settings
variables:
- title: West Pacific
- entity: sensor.nhl_west_pacific
- attributes:
label: Conference
minWidth: true
isMinWidthIndicator: true
isFadingIndicator: true
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:decluttering-card
template: nhl_settings
variables:
- title: Eastern
- entity: sensor.nhl_east_*
- type: custom:decluttering-card
template: nhl_settings
variables:
- title: Western
- entity: sensor.nhl_west_*
- attributes:
label: Overall
minWidth: true
isMinWidthIndicator: true
isFadingIndicator: true
card:
type: custom:decluttering-card
template: nhl_settings
variables:
- title: Overall
- entity: sensor.nhl_*_*
- attributes:
label: NHL Postgame
icon: mdi:hockey-sticks
minWidth: true
isMinWidthIndicator: true
isFadingIndicator: true
card:
type: custom:decluttering-card
template: game_stats
variables:
- sport: NHL
- status: POST
- attributes:
label: NHL Live
icon: mdi:hockey-puck
minWidth: true
isMinWidthIndicator: true
isFadingIndicator: true
card:
type: custom:decluttering-card
template: game_stats
variables:
- sport: NHL
- status: IN
- attributes:
label: NHL Pregame
icon: mdi:blood-bag
minWidth: true
isMinWidthIndicator: true
isFadingIndicator: true
card:
type: custom:decluttering-card
template: game_stats
variables:
- sport: NHL
- status: PRE
- attributes:
label: NFL
icon: mdi:ballot
card:
type: custom:tabbed-card
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': gray
'--mdc-typography-button-font-size': 12px
tabs:
- attributes:
label: NFL Standings
icon: mdi:ballot
card:
type: custom:tabbed-card
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': gray
'--mdc-typography-button-font-size': 12px
tabs:
- attributes:
label: Divisional
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:decluttering-card
template: nfl_settings
variables:
- title: American Football Conference East
- entity: sensor.nfl_afc_east
- type: custom:decluttering-card
template: nfl_settings
variables:
- title: American Football Conference North
- entity: sensor.nfl_afc_north
- type: custom:decluttering-card
template: nfl_settings
variables:
- title: American Football Conference South
- entity: sensor.nfl_afc_south
- type: custom:decluttering-card
template: nfl_settings
variables:
- title: American Football Conference West
- entity: sensor.nfl_afc_west
- type: custom:decluttering-card
template: nfl_settings
variables:
- title: National Football Conference East
- entity: sensor.nfl_nfc_east
- type: custom:decluttering-card
template: nfl_settings
variables:
- title: National Football Conference North
- entity: sensor.nfl_nfc_north
- type: custom:decluttering-card
template: nfl_settings
variables:
- title: National Football Conference South
- entity: sensor.nfl_nfc_south
- type: custom:decluttering-card
template: nfl_settings
variables:
- title: National Football Conference West
- entity: sensor.nfl_nfc_west
- attributes:
label: Conference
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:decluttering-card
template: nfl_settings
variables:
- title: American Football Conference
- entity: sensor.nfl_afc_*
- type: custom:decluttering-card
template: nfl_settings
variables:
- title: National Football Conference
- entity: sensor.nfl_nfc_*
- attributes:
label: Overall
card:
type: custom:decluttering-card
template: nfl_settings
variables:
- title: Overall
- entity: sensor.nfl_*_*
- attributes:
label: NFL Postgame
icon: mdi:football-helmet
card:
type: custom:decluttering-card
template: game_stats
variables:
- sport: NFL
- status: POST
- attributes:
label: NFL Live
icon: mdi:football
card:
type: custom:decluttering-card
template: game_stats
variables:
- sport: NFL
- status: IN
- attributes:
label: NFL Pregame
icon: mdi:strategy
card:
type: custom:decluttering-card
template: game_stats
variables:
- sport: MLB
- status: PRE
- attributes:
label: MLB
icon: mdi:ballot
card:
type: custom:tabbed-card
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': gray
'--mdc-typography-button-font-size': 12px
tabs:
- attributes:
label: MLB Standings
icon: mdi:ballot
card:
type: custom:tabbed-card
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': gray
'--mdc-typography-button-font-size': 12px
tabs:
- attributes:
label: Divisional
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:decluttering-card
template: mlb_settings
variables:
- title: American League East
- entity: sensor.mlb_american_east
- type: custom:decluttering-card
template: mlb_settings
variables:
- title: American League Central
- entity: sensor.mlb_american_central
- type: custom:decluttering-card
template: mlb_settings
variables:
- title: American League West
- entity: sensor.mlb_american_west
- type: custom:decluttering-card
template: mlb_settings
variables:
- title: National League East
- entity: sensor.mlb_national_east
- type: custom:decluttering-card
template: mlb_settings
variables:
- title: National League Central
- entity: sensor.mlb_national_central
- type: custom:decluttering-card
template: mlb_settings
variables:
- title: National League West
- entity: sensor.mlb_national_west
- attributes:
label: Conference
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:decluttering-card
template: mlb_settings
variables:
- title: Americal League
- entity: sensor.mlb_american_*
- type: custom:decluttering-card
template: mlb_settings
variables:
- title: National League
- entity: sensor.mlb_national_*
- attributes:
label: Overall
card:
type: custom:decluttering-card
template: mlb_settings
variables:
- title: Overall
- entity: sensor.mlb_*_*
- attributes:
label: MLB Postgame
icon: mdi:baseball
card:
type: custom:decluttering-card
template: game_stats
variables:
- sport: MLB
- status: POST
- attributes:
label: MLB Live
icon: mdi:baseball-bat
card:
type: custom:decluttering-card
template: game_stats
variables:
- sport: MLB
- status: IN
- attributes:
label: MLB Pregame
icon: mdi:baseball-diamond
card:
type: custom:decluttering-card
template: game_stats
variables:
- sport: MLB
- status: PRE
- attributes:
label: NBA
icon: mdi:ballot
card:
type: custom:tabbed-card
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': gray
'--mdc-typography-button-font-size': 12px
tabs:
- attributes:
label: NBA Standings
icon: mdi:ballot
card:
type: custom:tabbed-card
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': gray
'--mdc-typography-button-font-size': 12px
tabs:
- attributes:
label: Divisional
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:decluttering-card
template: nba_settings
variables:
- title: Eastern Conference Atlantic
- entity: sensor.nba_eastern_atlantic
- type: custom:decluttering-card
template: nba_settings
variables:
- title: Eastern Conference Central
- entity: sensor.nba_eastern_central
- type: custom:decluttering-card
template: nba_settings
variables:
- title: Eastern Conference Southeast
- entity: sensor.nba_eastern_southeast
- type: custom:decluttering-card
template: nba_settings
variables:
- title: Western Conference Northwest
- entity: sensor.nba_western_northwest
- type: custom:decluttering-card
template: nba_settings
variables:
- title: Western Conference Pacific
- entity: sensor.nba_western_pacific
- type: custom:decluttering-card
template: nba_settings
variables:
- title: Western Conference Southwest
- entity: sensor.nba_western_southwest
- attributes:
label: Conference
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:decluttering-card
template: nba_settings
variables:
- title: Eastern Conference
- entity: sensor.nba_eastern_*
- type: custom:decluttering-card
template: mlb_settings
variables:
- title: Western Conference
- entity: sensor.nba_western_*
- attributes:
label: Overall
card:
type: custom:decluttering-card
template: nba_settings
variables:
- title: Overall
- entity: sensor.nba_*_*
- attributes:
label: NBA Postgame
icon: mdi:basketball
card:
type: custom:decluttering-card
template: game_stats
variables:
- sport: MLB
- status: POST
- attributes:
label: NBA Live
icon: mdi:basketball-hoop
card:
type: custom:decluttering-card
template: game_stats
variables:
- sport: MLB
- status: IN
- attributes:
label: NBA Pregame
icon: mdi:account-details
card:
type: custom:decluttering-card
template: game_stats
variables:
- sport: MLB
- status: PRE
title: Testing
I am still perfecting the look. I just added scrolling for NHL STandings so that they are easier on a phone. I also targeted the Tabs to use Orange color with monWIdth and smaller indicators which I like better.
1 Like
In short:
I would call this elegant and easy - 3 levels, cascaded view.
1 Like
kbrown01
March 8, 2023, 11:53pm
6
I thought so too. I also tried and failed at making a “multi-line” tab. But since I am working on my home dashboards, I did not really need the “real estate”.
What I am trying to crack now is some way of using card-mod to grab the active tabs and make them look “more” active. You would have thought this would be easy since it certainly knows to underline the active ones at every level. I would love to see it look more like a tab with borders left/right and top (not bottom) and colored background for the active ones.
My card-mod skills are lacking, I guess I need to brush up on them
Could you repeat the same in the card-mod thread and post a sketch design of your intention?
As for “multiline” tabs - I will keep trying to achieve it. Results (if succeeded) will be posted in card-mod thread.
Hi @kbrown01 Thank you very much for sharing this config. I will study it carefully and so try to build my own dashboard.@Ildar_Gabdullin . And yes i am frequently visiting the card-mod thread as well to dig for information
Hi, is there a way to remove the light gray background of the selected part?
Now it’s like this
I would like it that way
Thanks
1 Like
Try playing with card-mod.
But which parameter should I change?
This is smth YOU have to find out by Code Inspector…
For a start: go to card-mod thread → 1st post → link at the bottom → tabbed-card
Also, this styling question is unrelated to the main topic.
