## Swap **Category**: Actions Clicky clicky ### Examples #### Hamburger menu toggle ```python Label( # Input(type='checkbox'), # Icon.hamburger(cls="swap-off"), # Icon.close(cls="swap-on"), cls='btn btn-circle swap swap-rotate' ) ``` #### Swap text ```python Label( # Input(type='checkbox'), Div('ON', cls='swap-on'), Div('OFF', cls='swap-off'), cls='swap' ) ``` #### Flip effect emojis ```python Label( Input(type='checkbox'), Div('😈', cls='swap-on'), Div('😇', cls='swap-off'), cls='swap swap-flip text-9xl' ) ``` #### Swap volume icons ```python Label( # Input(type='checkbox'), # Icon.volume_on(cls="swap-on"), # Icon.volume_off(cls="swap-off"), cls='swap' ) ``` #### Class-based activation ```python Div( Label( Div('🥵', cls='swap-on'), Div('🥶', cls='swap-off'), cls='swap text-6xl js-swap-demo' ), Label( Div('🥳', cls='swap-on'), Div('😭', cls='swap-off'), cls='swap text-6xl js-swap-demo' ), Script(""" // Auto toggle every second for all demo elements const elements = document.querySelectorAll('.js-swap-demo'); setInterval(() => { elements.forEach(el => { el.classList.toggle('swap-active'); }); }, 1000); """) ) ``` #### Rotating icons ```python Label( # Input(type='checkbox'), # Icon.sun(cls="swap-on"), # Icon.moon(cls="swap-off"), cls='swap swap-rotate' ) ```