-
Notification
-
Dmitriy Groshev
Hi, i am josephin. How are you...
17:123 -
Sufiya Elija
I need job, Please help me.
Fri -
Janis Evans
Good Morning!
8:2212 -
Mukrani Pabelo
Hi, i am josephin. How are you...
03:1410 -
Josephin Water
You’ve got some kind of a stom...
Thu -
Janis Evans
Good Morning!
8:2212 -
Sufiya Elija
I need job, Please help me.
Fri
-
-
-
-
Cart Items (25)
-
Flower Pot
$25.00
-
Iphone Max pro
$35.20
-
Royal Party Glass
$45.10
-
Water Proof Watch
$12.30
-
Traveling Duffle Bag
$32.10
Proceed to CheckoutAdd Total
$250.00 -
-
-
-
English -
French -
Spanich -
Arabic
-
-
Helen Walter
Admin
Swap
Swap
Swap allows you to toggle the visibility of two elements adding .swap , .swap-on, .swap-off class.
<div class="text-center">
<label class="swap">
<input type="checkbox" class="mb-0.5">
<span class="text-xl text-primary font-bold swap-on mb-[-6px]">ON</span>
<span class="text-xl text-secondary font-bold swap-off mb-[-6px]">OFF</span>
</label>
</div>
Swap With Dark/Light
You can set swap by adding .swap class.
<div class="text-center">
<label class="swap">
<input class="mb-0.5" type="checkbox">
<span class="text-3xl swap-on mb-[-5px]"><i data-feather="sun"></i></span>
<span class="text-3xl swap-off mb-[-5px]"><i data-feather="moon"></i></span>
</label>
</div>
Swap With Volume
You can add any icon for swap using .swap class.
<div class="text-center">
<label class="swap">
<input type="checkbox" class="mb-0.5">
<span class="swap-on mb-[-9px]"> +SVG_ICON("Volume-Off" ,"w-6 h-6 stroke-title") </span>
<span class="swap-off mb-[-9px]"> +SVG_ICON("Volume-Up" ,"w-6 h-6 stroke-title") </span>
</label>
</div>
Swap With Open/Close
You can add swap text using .swap , .swap-on, .swap-off class.
<div class="text-center">
<label class="swap">
<input type="checkbox" class="mb-0.5">
<span class="text-xl text-danger font-bold swap-on mb-[-6px]">Close</span>
<span class="text-xl text-success font-bold swap-off mb-[-6px]">Open</span>
</label>
</div>
Swap With Emojis
You can add emoji for swap using .swap-flip class.
<div class="text-center">
<label class="swap swap-flip text-[50px]">
<input class="mb-0.5" type="checkbox">
<span class="text-3xl swap-on mb-[-8px]">😈</span>
<span class="text-3xl swap-off mb-[-8px]">😇</span>
</label>
</div>
Swap With Hide/Show
You can add any icon for swap using .swap class.
<div class="text-center">
<label class="swap">
<input type="checkbox" class="mb-0.5">
<span class="swap-on mb-[-9px]"> +SVG_ICON("Show" ,"w-6 h-6 stroke-title") </span>
<span class="swap-off mb-[-9px]"> +SVG_ICON("Hide" ,"w-6 h-6 stroke-title") </span>
</label>
</div>
Swap With Like/Dislike
You can set any icons with .swap-rotate class.
<div class="text-center">
<label class="swap">
<input type="checkbox" class="mb-0.5">
<span class="Health mb-[-9px]"> +SVG_ICON("Show" ,"w-6 h-6 stroke-title") </span>
<span class="Heart-Broken mb-[-9px]"> +SVG_ICON("Hide" ,"w-6 h-6 stroke-title") </span>
</label>
</div>