Show If Property True Mixin

About Show If Property True Mixin

This mixin automatically shows or hides elements based on property values. It supports boolean properties, data attributes, and regular attributes. Perfect for dynamic interfaces where visibility depends on state.

💡 Tip: The mixin preserves the original display style and restores it when the property becomes true again!

🎛️ Property Controls

Toggle these properties to show or hide the corresponding bar below:

isVisible: true

isEnabled: true

isActive: false

showAdvanced: false

🎯 Bars Demo

Each bar below is controlled by its corresponding property above:

isVisible Bar

isEnabled Bar

isActive Bar

showAdvanced Bar

📜 Property Change Log

Property change log will appear here...

📖 Implementation Guide

How to Use the Show If Property True Mixin:

1. Use the mixin element: <show-if-property-true-mixin show-if-property="myProperty">content</show-if-property-true-mixin>

2. Set the property to control visibility: show-if-property="myProperty"

3. The mixin will automatically show/hide based on the property value

          // Using the show-if-property-true-mixin element
          <show-if-property-true-mixin show-if-property="isVisible">
          <div style="background: linear-gradient(45deg, #ff6b6b, #4ecdc4); color: white; padding: 20px; border-radius: 8px;">
          This element shows/hides based on the isVisible property
          </div>
          </show-if-property-true-mixin>
        

          // Programmatic control
          const mixin = document.querySelector('show-if-property-true-mixin');

          // Set the property to control visibility
          mixin.setShowProperty('isEnabled');

          // Update the property value on the target element
          const targetElement = mixin.firstElementChild;
          targetElement.isEnabled = true; // Shows the element
          targetElement.isEnabled = false; // Hides the element

          // Refresh visibility manually
          mixin.refreshVisibility();
        

          // Using data attributes
          <div show-if-property="data-is-visible" data-is-visible="true">
          This element is controlled by a data attribute
          </div>

          // Using regular attributes
          <div show-if-property="hidden" hidden="false">
          This element is controlled by a regular attribute
          </div>
        

✨ Features

What the Show If Property True Mixin Provides:

Property Detection: Automatically detects boolean properties, data attributes, and regular attributes
Display Preservation: Remembers and restores the original display style
Dynamic Updates: Responds to property changes in real-time
Multiple Sources: Supports element properties, data attributes, and regular attributes
Programmatic Control: API methods for setting properties and refreshing visibility
Attribute Support: Works with HTML attributes for declarative usage

👁️ Show If Property True Mixin