The Swap component allows you to quickly swap between two icons, images, or HTML elements with a simple click.
The simplest use of the Swap component is to toggle between two emojis. You can even add various animations!
.mt-4.flex.gap-x-6.text-4xl.lg:text-6xl
= daisy_swap(off: "❤️", on: "💔")
= daisy_swap(off: "🌚", on: "🌞", css: "swap-rotate")
= daisy_swap(off: "🔇", on: "🔊", css: "swap-flip")
You can also use the Swap component with Hero Icons. The following example toggles between various icons.
You can also use our special loco_icon helper which accepts the css
property and all other options that our custom components accept.
.mt-2.flex.items-center.gap-x-4
- sizes = "size-16"
= daisy_swap(checked: true) do |swap|
- swap.with_on do
= loco_icon "pause-circle", css: sizes
- swap.with_off do
= loco_icon "play-circle", css: sizes
= daisy_swap(checked: true) do |swap|
- swap.with_on do
= loco_icon "bell-alert", css: sizes + " animate-bounce text-purple-600"
- swap.with_off do
= loco_icon "bell-slash", css: sizes + " text-gray-400"
- # The standard tooltip hover doesn't work with the swap element well, so we
- # force it open for this example.
- #
- # Also, the tooltip seems to change the spacing, so we add some top margin
- # to keep the icon centered vertically.
= daisy_swap(css: "text-blue-600 mt-1") do |swap|
- swap.with_on do
.tooltip.tooltip-right.tooltip-open{ data: { tip: "Dollar" }}
= loco_icon "currency-dollar", css: sizes
- swap.with_off do
.tooltip.tooltip-right.tooltip-open{ data: { tip: "Euro" }}
= loco_icon "currency-euro", css: sizes
You can also use the Swap component with custom HTML elements. The
following example toggles between a stop sign, a go sign, and a slow sign
(when you click the Make Indeterminate button).
- shared_classes = "p-8 mask text-center font-bold"
.w-56.mt-4.flex.flex-col.items-center
= daisy_swap(css: "swap-rotate", checkbox_html: { id: "stopsign" }) do |swap|
- swap.with_off(css: "mask-hexagon bg-red-600 text-white #{shared_classes}") do
Stop
- swap.with_on(css: "mask-circle bg-green-500 text-white #{shared_classes}") do
Go
- swap.with_indeterminate(css: "mask-squircle bg-yellow-500 text-black #{shared_classes}") do
Slow
.mt-2.btn.btn-sm.px-4.py-2{ onclick: "document.getElementById('stopsign').indeterminate = true" }
Make Indeterminate
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.