### Full Expander Card Configuration Example (YAML) Source: https://context7.com/alia5/lovelace-expander-card/llms.txt An extensive configuration example showcasing all available options for the Expander Card. This includes options for background transparency, child card styling, persistent state, and layout adjustments. ```yaml type: custom:expander-card title: Smart Home Controls clear: true # Remove card background clear-children: true # Remove child card backgrounds expanded: false # Start collapsed expand-id: smart-home-section # Persist state in localStorage button-background: transparent # Expand button background color gap: 0.6em # Gap between child cards padding: 1em # Card content padding child-padding: 0.5em # Individual child card padding cards: - type: entities entities: - switch.smart_plug_1 - switch.smart_plug_2 - type: thermostat entity: climate.living_room ``` -------------------------------- ### Manual Installation via Command Line Source: https://context7.com/alia5/lovelace-expander-card/llms.txt Install the Lovelace Expander Card manually by downloading the JavaScript file using `wget` and moving it to the Home Assistant configuration's `www` directory. This method is an alternative to using HACS. ```bash # Manual installation via command line wget https://github.com/Alia5/lovelace-expander-card/releases/download/latest/lovelace-expander-card.js mv lovelace-expander-card.js /config/www/ ``` -------------------------------- ### Manual Card Installation (Bash) Source: https://github.com/alia5/lovelace-expander-card/blob/master/README.md This snippet demonstrates how to manually download the expander-card JavaScript file and place it in the Home Assistant www directory using a bash command. ```bash wget https://github.com/Alia5/lovelace-expander-card/releases/download/latest/lovelace-expander-card.js mv lovelace-expander-card.js /config/www/ ``` -------------------------------- ### Link Expander Card to Lovelace UI (YAML) Source: https://github.com/alia5/lovelace-expander-card/blob/master/README.md This snippet shows how to link the manually installed expander-card JavaScript file to your Lovelace UI configuration in `ui-lovelace.yaml`. ```yaml resources: - url: /local/lovelace-expander-card.js type: js ``` -------------------------------- ### Add Expander Card Resource to ui-lovelace.yaml Source: https://context7.com/alia5/lovelace-expander-card/llms.txt Configure the Lovelace UI to recognize the Expander Card by adding its JavaScript file as a resource in your `ui-lovelace.yaml` configuration. This step is necessary for manual installations. ```yaml # Add to ui-lovelace.yaml resources resources: - url: /local/lovelace-expander-card.js type: js ``` -------------------------------- ### Expander Card with Persistent State (YAML) Source: https://context7.com/alia5/lovelace-expander-card/llms.txt This example shows how to configure the Expander Card to remember its expanded or collapsed state across browser sessions using the `expand-id` option. The state is saved in the browser's localStorage. ```yaml # Expander that remembers its state type: custom:expander-card title: Frequently Accessed Controls expand-id: frequent-controls # Unique ID for localStorage expanded: true # Default state on first load cards: - type: entities entities: - switch.main_lights - switch.security_system - lock.front_door ``` -------------------------------- ### Expander Card with Standard Title Card (YAML) Source: https://context7.com/alia5/lovelace-expander-card/llms.txt An example of configuring the Expander Card where the title is a standard Lovelace entity card. The expand/collapse button appears next to the title card, not overlaid. ```yaml # Title card without overlay (button appears beside card) type: custom:expander-card title-card: type: entity entity: sensor.temperature title-card-padding: 8px title-card-button-overlay: false cards: - type: sensor entity: sensor.humidity ``` -------------------------------- ### Basic Expander Card Configuration (YAML) Source: https://context7.com/alia5/lovelace-expander-card/llms.txt A basic configuration for the Expander Card, demonstrating how to set a title and include child cards. The 'expanded' option controls the initial state (collapsed or expanded). ```yaml type: custom:expander-card title: Living Room Lights expanded: false cards: - type: light entity: light.living_room_main - type: light entity: light.living_room_accent ``` -------------------------------- ### Expander Card with Custom Title Card and Overlay Button (YAML) Source: https://context7.com/alia5/lovelace-expander-card/llms.txt This configuration demonstrates using a custom Lovelace card (e.g., Mushroom entity card) as the title for the Expander Card. It also shows how to overlay the expand/collapse button on top of the title card for a cleaner look. ```yaml # Using a custom card as the title with overlay button type: custom:expander-card title-card: type: custom:mushroom-entity-card entity: light.bedroom tap_action: action: toggle title-card-padding: 0px title-card-button-overlay: true # Position button as overlay overlay-margin: 2em # Margin from top-right corner cards: - type: custom:mushroom-light-card entity: light.bedroom show_brightness_control: true - type: entities entities: - light.bedroom_lamp - light.bedroom_ceiling ``` -------------------------------- ### Clear/Transparent Styling for Expander Card Source: https://context7.com/alia5/lovelace-expander-card/llms.txt Achieve a cleaner, integrated look by removing backgrounds and borders of the expander card and its children. This is useful for custom themes or transparent dashboard designs. The `button-background` option allows for semi-transparent button styling. ```yaml # Fully transparent expander with transparent children type: custom:expander-card title: Transparent Section clear: true # Remove expander background clear-children: true # Remove child card backgrounds/borders button-background: rgba(255,255,255,0.1) # Semi-transparent button gap: 1em padding: 0.5em cards: - type: entities entities: - sensor.cpu_usage - sensor.memory_usage - type: gauge entity: sensor.disk_usage min: 0 max: 100 # Transparent expander with styled children type: custom:expander-card title: Mixed Styling clear: true clear-children: false # Keep child card backgrounds cards: - type: markdown content: "### System Status" - type: entities entities: - binary_sensor.system_online ``` -------------------------------- ### Nested Expander Cards for Hierarchical Organization (YAML) Source: https://context7.com/alia5/lovelace-expander-card/llms.txt This configuration illustrates how to nest Expander Cards within each other to create multi-level collapsible sections. This is useful for organizing complex dashboards with a hierarchical structure. ```yaml # Nested expanders for hierarchical organization type: custom:expander-card title: House Controls expanded: true expand-id: house-main cards: # First nested expander - type: custom:expander-card title: Upstairs expand-id: house-upstairs clear: true cards: - type: custom:expander-card title: Master Bedroom expand-id: house-upstairs-master cards: - type: light entity: light.master_bedroom - type: entities entities: - switch.master_fan - type: custom:expander-card title: Kids Room expand-id: house-upstairs-kids cards: - type: light entity: light.kids_room # Second nested expander - type: custom:expander-card title: Downstairs expand-id: house-downstairs clear: true cards: - type: entities entities: - light.living_room - light.kitchen ``` -------------------------------- ### Multiple Expanders with Unique IDs Source: https://context7.com/alia5/lovelace-expander-card/llms.txt Organize dashboard elements into distinct collapsible sections using unique IDs. This allows for independent control and state management of each expander, ensuring a clean and structured user interface. ```yaml type: vertical-stack cards: - type: custom:expander-card title: Lighting expand-id: section-lighting cards: - type: light entity: light.all_lights - type: custom:expander-card title: Climate expand-id: section-climate cards: - type: thermostat entity: climate.main - type: custom:expander-card title: Security expand-id: section-security cards: - type: alarm-panel entity: alarm_control_panel.home ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.