Skip to content

Commit 1d5f5d6

Browse files
authored
Add files via upload
1 parent 4185544 commit 1d5f5d6

1 file changed

Lines changed: 75 additions & 31 deletions

File tree

README.md

Lines changed: 75 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,21 @@ A clean and configurable tabs card for Home Assistant Dashboards.
44

55
![Simple Tabs Card Screenshot](https://raw.githubusercontent.com/agoberg85/home-assistant-simple-tabs/main/simple-tabs-gif.gif)
66

7+
## Support development
8+
9+
Buy me a coffee: https://buymeacoffee.com/mysmarthomeblog
10+
Subscribe to Youtube channel: https://www.youtube.com/@My_Smart_Home
11+
712
## Features
813

914
- **Organize Your Dashboard:** Group any Dashboard cards into a clean, tabbed interface.
1015
- **Tab Icons:** Add icon to your tab titles.
1116
- **Stylable:** Customize colors for the background, border, text, and active tab.
1217
- **Alignment:** Align your tabs to the start, center, or end of the card.
13-
- **Performance:** Use the default "lazy-loading" for the best performance, or enable "pre-loading" for instantaneous tab switching.
18+
- **Dynamic Defaults:** Change the default tab automatically based on your home's state (e.g., show "Remote" tab when TV is on).
19+
- **User Privacy:** Hide specific tabs from specific users (e.g., hide admin controls from guests).
1420
- **Conditional Tabs:** Dynamically show or hide tabs based on entity states or complex jinja templates.
21+
- **Performance:** Use the default "lazy-loading" for the best performance, or enable "pre-loading" for instantaneous tab switching.
1522

1623
## Installation
1724

@@ -42,7 +49,8 @@ A clean and configurable tabs card for Home Assistant Dashboards.
4249
| `type` | string | **Required** | `custom:simple-tabs` | |
4350
| `tabs` | list | **Required** | A list of tab objects to display. See below. | |
4451
| `alignment` | string | Optional | Justification for the row of tabs. (`start`, `center`, `end`) | `'center'` |
45-
| `default_tab` | number | Optional | Defines the default tab. If a tab is hidden via conditions it will fall back to the first visible tab. | `1` |
52+
| `default_tab` | number/list | Optional | Defines the default tab. Can be a static number (1-based) or a list of conditional rules (see Advanced Configuration). | `1` |
53+
| `hide_inactive_tab_titles` | boolean | Optional | If `true`, hides the title text on tabs that are not currently active (showing only the icon). | `false` |
4654
| `pre-load` | boolean | Optional | If `true`, renders all tab content on load for faster switching. | `false` |
4755
| `background-color`| string | Optional | CSS color for the button background. | `none` |
4856
| `border-color` | string | Optional | CSS color for the button border. | Your theme's `divider-color` |
@@ -63,42 +71,84 @@ Each entry in the `tabs` list is an object with the following properties:
6371
| `title` | string | Optional* | The text to display on the tab. Can be jinja template |
6472
| `icon` | string | Optional* | An MDI icon to display next to the title (e.g., `mdi:lightbulb`). Can be jinja template |
6573
| `card` | object | **Required** | A standard Lovelace card configuration. |
66-
| `conditions` | list | Optional | A list of conditions that must be met to show the tab. See [EXAMPLES.md](EXAMPLES.md) |
74+
| `conditions` | list | Optional | A list of conditions (`entity`, `template`, or `user`) that must be met to show the tab. |
6775

6876
*Either title or icon has to be defined.
6977

78+
## Advanced Configuration
79+
80+
### Dynamic Default Tab
81+
82+
Instead of a static number, `default_tab` can be a list of rules. The card will check them from top to bottom and select the first one that matches.
83+
84+
**Note:** It is recommended to use `entity` state checks here rather than `template` for faster initial loading.
85+
86+
```yaml
87+
default_tab:
88+
# 1. If TV is on, open Tab 2 (Controls)
89+
- tab: 2
90+
conditions:
91+
- entity: media_player.tv
92+
state: 'on'
93+
# 2. If it is night time, open Tab 3 (Bedroom)
94+
- tab: 3
95+
conditions:
96+
- entity: sun.sun
97+
state: 'below_horizon'
98+
# 3. Fallback to Tab 1
99+
- tab: 1
100+
```
101+
102+
### User Visibility (Privacy)
103+
104+
You can hide specific tabs from specific users by adding a `user` condition. You will need the long User ID string (found in HA Settings -> People -> Users -> Click User -> ID at bottom).
105+
106+
```yaml
107+
tabs:
108+
- title: Admin Controls
109+
icon: mdi:shield-account
110+
conditions:
111+
- user:
112+
- "8234982374982374982374" # Dad
113+
- "1928371928371928371928" # Mom
114+
card:
115+
# ...
116+
```
117+
70118
## Example Usage
71119

72-
### Example Configuration
120+
### Full Example
73121

74-
This will create two centered tabs.
122+
This configuration demonstrates dynamic defaults, user restrictions, and the compact "hide inactive titles" style.
75123

76124
```yaml
77125
type: custom:simple-tabs
78-
pre-load: false
79-
default_tab: 2
80-
alignment: center
81-
background-color: "#2a2a2a"
82-
border-color: "#555555"
83-
text-color: "#bbbbbb"
84-
hover-color: "#ffffff"
85-
active-text-color: "#000000"
86-
active-background: linear-gradient(122deg,rgba(230, 163, 222, 1) 20%, rgba(0, 212, 255, 1) 150%)
87-
tabs:
88-
- title: Weather
89-
icon: mdi:weather-sunny
126+
alignment: start
127+
hide_inactive_tab_titles: true
128+
default_tab:
129+
- tab: 2
90130
conditions:
91-
- entity: input_boolean.zone_home
92-
state: "on"
93-
- template: "{{ now().hour < 17 }}"
131+
- entity: light.kitchen_lights
132+
state: 'on'
133+
- tab: 1
134+
tabs:
135+
- title: Livingroom
136+
icon: mdi:sofa
94137
card:
95138
type: markdown
96-
content: Weather card goes here
97-
- title: "Lights on: {{ states.light | selectattr('state','eq','on') | list | count }}"
98-
icon: mdi:lightbulb
139+
content: Livingroom goes here
140+
- title: Kitchen
141+
icon: mdi:silverware-fork-knife
99142
card:
100143
type: markdown
101-
content: Lights goes here
144+
content: Kitchen goes here
145+
- title: Admin
146+
icon: mdi:cog
147+
conditions:
148+
- user: "YOUR_ADMIN_ID_HERE"
149+
card:
150+
type: markdown
151+
content: Sensitive admin controls...
102152
```
103153

104154
## Roadmap ahead
@@ -108,10 +158,4 @@ tabs:
108158
- **Touch navigation:** Add support for touch/swipe navigation on mobile devices.
109159
- **Animations:** Add animations when switching between tabs.
110160
- **URL support:** Make tabs linkable via URLs (like #tab-2)
111-
- **Badges:** Option to add badges (text, number, color) to tab buttons.
112-
113-
## Support development
114-
115-
Buy me a coffee: https://buymeacoffee.com/mysmarthomeblog
116-
117-
Subscribe to Youtube channel: https://www.youtube.com/@My_Smart_Home
161+
- **Badges:** Option to add badges (text, number, color) to tab buttons.

0 commit comments

Comments
 (0)