Swap
Swap allows you to toggle the visibility of two elements using a checkbox or a class name.
| Class name | Type | |
|---|---|---|
| swap | Component | Container element |
| swap-on | Component | The child element that should be visible when checkbox is checked or when swap is active |
| swap-off | Component | The child element that should be visible when checkbox is not checked or when swap is not active |
| swap-indeterminate | Component | The child element that should be visible when checkbox is indeterminate |
| swap-active | Modifier | Activates the swap (no need for checkbox) |
| swap-rotate | Modifier | Adds rotate effect to swap |
| swap-flip | Modifier | Adds flip effect to swap |
# Swap text
# Swap volume icons
# Swap icons with rotate effect
# Hamburger button
# Swap icons with flip effect
# Activate using class name instead of checkbox
Instead of working with click, it shows swap-on item if you add swap-active class name. You can add or remove swap-active class using JS
🥵
🥶
🥳
😭
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development:
Open Collective
