Skip to content

Commit

Permalink
more styling support
Browse files Browse the repository at this point in the history
  • Loading branch information
@kinghat
kinghat committed Oct 2, 2022
1 parent d3643df commit f35237d
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 58 deletions.
125 changes: 71 additions & 54 deletions .devcontainer/config/lovelace.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,17 @@ views:
- title: Map First
cards:
- type: custom:tabbed-card
options:
defaultCardIndex: 0
styles:
tabs:
- label: Map Tab
- attributes:
label: Map Tab
card:
type: map
title: Map
entities:
- device_tracker.demo_paulus
- device_tracker.demo_anne_therese
- label: Grid
- attributes:
label: Grid
card:
type: grid
square: false
Expand All @@ -26,7 +25,8 @@ views:
entity: humidifier.humidifier
- type: humidifier
entity: humidifier.hygrostat
- label: Button
- attributes:
label: Button
card:
type: button
entity: light.bed_light
Expand All @@ -38,10 +38,9 @@ views:
- title: Map Second
cards:
- type: custom:tabbed-card
options:
defaultCardIndex: 0
tabs:
- label: Grid
- attributes:
label: Grid
card:
type: grid
square: false
Expand All @@ -53,14 +52,16 @@ views:
entity: humidifier.humidifier
- type: humidifier
entity: humidifier.hygrostat
- label: Map Tab
- attributes:
label: Map Tab
card:
type: map
title: Map
entities:
- device_tracker.demo_paulus
- device_tracker.demo_anne_therese
- label: Button
- attributes:
label: Button
card:
type: button
entity: light.bed_light
Expand All @@ -72,10 +73,9 @@ views:
- title: Solo
cards:
- type: custom:tabbed-card
options:
defaultCardIndex: 0
tabs:
- label: Grid
- attributes:
label: Grid
card:
type: grid
square: false
Expand All @@ -87,19 +87,22 @@ views:
entity: humidifier.humidifier
- type: humidifier
entity: humidifier.hygrostat
- label: Test Map
- attributes:
label: Test Map
card:
type: map
title: Test Map
entities:
- device_tracker.demo_paulus
- device_tracker.demo_anne_therese
- label: Thermostat
- attributes:
label: Thermostat
card:
type: thermostat
name: HVACS
entity: climate.hvac
- label: button
- attributes:
label: Button
card:
type: button
entity: light.bed_light
Expand All @@ -108,7 +111,8 @@ views:
show_name: true
show_icon: true
show_state: true
- label: Sensors
- attributes:
label: Sensors
card:
type: entities
title: Sensor
Expand All @@ -119,14 +123,16 @@ views:
- sensor.outside_temperature
- sensor.power_consumption
- sensor.today_energy
- label: Air Quality
- attributes:
label: Air Quality
card:
type: entities
title: Air Quality
entities:
- air_quality.demo_air_quality_home
- air_quality.demo_air_quality_office
- label: Lights
- attributes:
label: Lights
card:
type: entities
title: Light
Expand All @@ -137,14 +143,16 @@ views:
- light.kitchen_lights
- light.living_room_rgbww_lights
- light.office_rgbw_lights
- label: Binary Sensor
- attributes:
label: Binary Sensor
card:
type: entities
title: Binary sensor
entities:
- binary_sensor.basement_floor_wet
- binary_sensor.movement_backyard
- label: Calendar
- attributes:
label: Calendar
card:
type: entities
title: Calendar
Expand All @@ -153,7 +161,8 @@ views:
name: "1"
- entity: calendar.calendar_2
name: "2"
- label: Grid
- attributes:
label: Grid
card:
type: grid
square: false
Expand Down Expand Up @@ -181,17 +190,9 @@ views:
- air_quality.demo_air_quality_home
- air_quality.demo_air_quality_office
- type: custom:tabbed-card
options:
defaultCardIndex: 0
tabs:
- label: Test Map
card:
type: map
title: Test Map
entities:
- device_tracker.demo_paulus
- device_tracker.demo_anne_therese
- label: Grid
- attributes:
label: Grid
card:
type: grid
square: false
Expand All @@ -203,12 +204,22 @@ views:
entity: humidifier.humidifier
- type: humidifier
entity: humidifier.hygrostat
- label: Thermostat
- attributes:
label: Test Map
card:
type: map
title: Test Map
entities:
- device_tracker.demo_paulus
- device_tracker.demo_anne_therese
- attributes:
label: Thermostat
card:
type: thermostat
name: HVACS
entity: climate.hvac
- label: button
- attributes:
label: Button
card:
type: button
entity: light.bed_light
Expand All @@ -217,7 +228,8 @@ views:
show_name: true
show_icon: true
show_state: true
- label: Sensors
- attributes:
label: Sensors
card:
type: entities
title: Sensor
Expand All @@ -228,14 +240,16 @@ views:
- sensor.outside_temperature
- sensor.power_consumption
- sensor.today_energy
- label: Air Quality
- attributes:
label: Air Quality
card:
type: entities
title: Air Quality
entities:
- air_quality.demo_air_quality_home
- air_quality.demo_air_quality_office
- label: Lights
- attributes:
label: Lights
card:
type: entities
title: Light
Expand All @@ -246,14 +260,16 @@ views:
- light.kitchen_lights
- light.living_room_rgbww_lights
- light.office_rgbw_lights
- label: Binary Sensor
- attributes:
label: Binary Sensor
card:
type: entities
title: Binary sensor
entities:
- binary_sensor.basement_floor_wet
- binary_sensor.movement_backyard
- label: Calendar
- attributes:
label: Calendar
card:
type: entities
title: Calendar
Expand All @@ -262,18 +278,25 @@ views:
name: "1"
- entity: calendar.calendar_2
name: "2"
- label: Grid
- attributes:
label: Grid
card:
type: grid
square: false
columns: 1
cards:
- type: entities
title: Button
entities:
- button.push
- type: picture-entity
entity: camera.demo_camera
- type: thermostat
name: HVACS
entity: climate.hvac
- type: entities
title: Calendar
entities:
- entity: calendar.calendar_1
name: "1"
- entity: calendar.calendar_2
name: "2"
- type: picture-entity
entity: camera.demo_camera_png
- type: entities
Expand All @@ -286,15 +309,14 @@ views:
cards:
- type: custom:tabbed-card
options:
defaultCardIndex: 0
defaultTabIndex: 1
styles:
--mdc-theme-primary: yellow
--mdc-tab-text-label-color-default: orange
--mdc-tab-color-default: orange
attributes:
label: Global Label
label:
icon: mdi:stop
indicatorIcon:
isFadingIndicator:
minWidth:
isMinWidthIndicator:
Expand All @@ -308,12 +330,10 @@ views:
attributes:
label: Button
icon: mdi:fire
indicatorIcon:
isFadingIndicator:
minWidth:
isMinWidthIndicator:
stacked:
active:
stacked: true
card:
type: button
entity: light.bed_light
Expand All @@ -325,12 +345,10 @@ views:
- attributes:
label: Sensors
icon: mdi:tree
indicatorIcon:
isFadingIndicator:
minWidth:
isMinWidthIndicator:
stacked:
active:
card:
type: entities
title: Sensor
Expand All @@ -344,7 +362,6 @@ views:
- attributes:
label: Air Quality
icon: mdi:play
indicatorIcon:
isFadingIndicator:
minWidth:
isMinWidthIndicator:
Expand Down
18 changes: 14 additions & 4 deletions src/tabbed-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,23 +35,25 @@ interface mwcTabBarEvent extends Event {
}

interface TabbedCardConfig extends LovelaceCardConfig {
options?: {};
options?: options;
styles?: {};
attributes?: {};
tabs: Tab[];
}

interface options {
defaultTabIndex?: number;
}

interface Tab {
styles?: {};
attributes?: {
label?: string;
icon?: string;
indicatorIcon?: string;
isFadingIndicator?: boolean;
minWidth?: boolean;
isMinWidthIndicator?: boolean;
stacked?: boolean;
active?: boolean;
};
card: LovelaceCardConfig;
}
Expand Down Expand Up @@ -177,6 +179,7 @@ export class TabbedCard extends LitElement {
@MDCTabBar:activated=${(ev: mwcTabBarEvent) =>
(this.selectedTabIndex = ev.detail.index)}
style=${styleMap(this._styles)}
activeIndex=${ifDefined(this._config?.options?.defaultTabIndex)}
>
<!-- no horizontal scrollbar shown when tabs overflow in chrome -->
${this._tabs.map(
Expand All @@ -186,9 +189,16 @@ export class TabbedCard extends LitElement {
style=${ifDefined(styleMap(tab?.styles || {}))}
label="${tab?.attributes?.label || nothing}"
?hasImageIcon=${tab?.attributes?.icon}
?isFadingIndicator=${tab?.attributes?.isFadingIndicator}
?minWidth=${tab?.attributes?.minWidth}
?isMinWidthIndicator=${tab?.attributes?.isMinWidthIndicator}
?stacked=${tab?.attributes?.stacked}
>
${tab?.attributes?.icon
? html`<ha-icon slot="icon" icon="${tab?.attributes?.icon}"</ha-icon>`
? html`<ha-icon
slot="icon"
icon="${tab?.attributes?.icon}"
></ha-icon>`
: html``}
</mwc-tab>
`,
Expand Down

0 comments on commit f35237d

Please sign in to comment.