[Styling Module, JS Module, JS+Editor Module] Sliding Sub Toggle

[MephistoJB]

Sliding Sub Toggle

Version: 1.0.1
Creator: John Bechara

Important

Supported cards:

• Sub Buttons

Displays sub-buttons as vertical pill-shaped switches with a sliding circular icon. The circular icon is positioned at the top when the > entity is OFF and smoothly slides to the bottom when the entity is ON.

Usage requirements

• The icon must be enabled on the sub-button
• Background color based on state
• must be enabled
• The name display must be disabled
• Tap action must be set to Toggle

This module supports sub-buttons only and does not apply to main buttons.

Configure this module via the editor or in YAML, for example:

sliding_sub_toggle: 
    # Your configuration here

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into a /www/bubble/modules/sliding_sub_toggle.yaml file.

sliding_sub_toggle:
    name: "Sliding Sub Toggle"
    version: "1.0.1"
    creator: "John Bechara"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - sub-buttons

    description: |
        Displays sub-buttons as vertical pill-shaped switches with a sliding circular icon. The circular icon is positioned at the top when the entity is OFF and smoothly slides to the bottom when the entity is ON. // Usage requirements: 1. The icon must be enabled on the sub-button 2. Background color based on state must be enabled 3. The name display must be disabled 4. Tap action must be set to Toggle // This module supports sub-buttons only and does not apply to main buttons.
        <br><br>
        <code-block><pre>
        sliding_sub_toggle: 
            # Your configuration here
        </pre></code-block>

    code: |
        .bubble-sub-button {
          width: 64px !important;
          height: 100px !important;
        
          border-radius: 999px !important;
        
          background: var(
            --bubble-sub-button-background-color,
            rgba(230, 230, 230, 1)
          ) !important;
        
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: flex-start !important;
        
          padding: 10px 0 !important;
          box-sizing: border-box !important;
        }
        
        .bubble-sub-button ha-icon {
          width: 44px !important;
          height: 44px !important;
        
          background: var(--card-background-color, white) !important;
          border-radius: 50% !important;
        
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        
          margin-top: 0;
          margin-bottom: auto;
        
          transition:
            transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
            background-color 180ms ease;
        }
        
        .bubble-sub-button.background-off ha-icon {
          transform: translateY(0);
          --mdc-icon-color: var(--primary-text-color, #000);
        }
        
        .bubble-sub-button.background-on ha-icon {
          transform: translateY(36px);
          background: var(--bubble-default-color) !important;
          --mdc-icon-color: #fff;
        }

    editor:
      []
      

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[MephistoJB]

It should work now. But the description is kind of cut off. Is there a token limit or something?

[Clooos]

Nice! I can confirm it works now 😄

And indeed, only the first sentence is displayed to avoid descriptions that are too long. In your case the first sentence seems perfect (like for everyone else 👌).

Edit: I've edited you description, it was displayed at the same level as your supported cards, which is not the intended structure, now it is perfect 👌