components
Tailwind CSS Swap
Use FlyonUI's swap component with Tailwind CSS to toggle element visibility for dynamic, interactive web UIs.
Utilize the swap
component class along with an empty checkbox input and child component classes swap-off
and swap-on
to create a swap component.
<label class="swap">
<input type="checkbox" />
<span class="swap-off">OFF</span>
<span class="swap-on">ON</span>
</label>
Use below given example for volume/mute swap component.
<label class="swap">
<input type="checkbox" />
<span class="swap-on icon-[tabler--volume] size-6"></span>
<span class="swap-off icon-[tabler--volume-off] size-6"></span>
</label>
Apply the modifier class swap-rotate
to enable a rotate effect for the swap component.
<label class="swap swap-rotate">
<input type="checkbox" />
<span class="swap-on icon-[tabler--sun] size-6"></span>
<span class="swap-off icon-[tabler--moon] size-6"></span>
</label>
Use below given example for hamburger button.
<label class="btn btn-circle swap swap-rotate">
<input type="checkbox" />
<span class="icon-[tabler--menu-2] swap-off"></span>
<span class="icon-[tabler--x] swap-on"></span>
</label>
Apply the modifier class swap-flip
to enable a flip effect for the swap component.
<label class="swap swap-flip text-6xl">
<input type="checkbox" />
<span class="swap-on">😈</span>
<span class="swap-off">😇</span>
</label>
Utilize the component class swap-js
to designate a specific swap component for JavaScript functionality, allowing the swap to function without a checkbox. Toggling the modifier class swap-active
on a click event of the swap component facilitates this behavior.
<label class="swap swap-js text-6xl">
<span class="swap-on">🥵</span>
<span class="swap-off">🥶</span>
</label>
<label class="swap swap-js text-6xl">
<span class="swap-on">🥳</span>
<span class="swap-off">😭</span>
</label>
<script>
// Swap elements JS code below
const swapElements = document.querySelectorAll('.swap-js')
// Function to handle click event on swap elements
function handleClick(event) {
// Toggle the 'swap-active' class on the clicked swap element
event.currentTarget.classList.toggle('swap-active')
// Get the 'swap-on' and 'swap-off' elements within the current swap element
const swapOn = event.currentTarget.querySelector('.swap-on')
const swapOff = event.currentTarget.querySelector('.swap-off')
// Determine the value based on the presence of 'swap-active' class
const value = event.currentTarget.classList.contains('swap-active') ? swapOn.innerHTML : swapOff.innerHTML
// Log the value to the console
console.log(`Value: ${value}`)
}
// Iterate through each swap element and add click event listener
swapElements.forEach(swapElement => {
swapElement.addEventListener('click', handleClick)
})
</script>
Use below given example for RTL swap.
<label class="swap">
<input type="checkbox" />
<span class="swap-off font-medium">LTR</span>
<span class="swap-on font-medium">RTL</span>
</label>
Use below given example for play-pause button.
<label class="btn btn-circle swap swap-rotate">
<input type="checkbox" />
<span class="icon-[tabler--player-play] swap-off"></span>
<span class="icon-[tabler--player-pause] swap-on"></span>
</label>