Swap

Swap toggles the visibility of two elements with a smooth transition. Perfect for toggle buttons, theme switchers, and animated icons.

const { default: Swap } = await import('/components/actions/swap.js');

const { tags, $ } = Lightview;
const { div, span } = tags;

// Emoji swap with rotate effect
const emojiSwap = Swap({ effect: 'rotate', class: 'text-4xl' },
    Swap.On({}, '😈'),
    Swap.Off({}, '😇')
);

// Play/Pause swap
const playPause = Swap({ effect: 'rotate', class: 'btn btn-circle' },
    Swap.On({}, '⏸️'),
    Swap.Off({}, '▶️')
);

$('#demo').insert(
    div({ class: 'flex gap-8 items-center' }, 
        emojiSwap, 
        playPause
    )
);

const { default: Swap } = await import('/components/actions/swap.js');
const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div, span, p } = tags;

const isActive = signal(false);

// Controlled swap
const swap = Swap({ 
    effect: 'flip',
    class: 'text-6xl',
    active: () => isActive.value,
    onChange: (checked) => { isActive.value = checked; }
},
    Swap.On({}, '🥳'),
    Swap.Off({}, '😭')
);

// External control
const demo = div({ class: 'flex flex-col gap-4 items-center' },
    swap,
    p({ class: 'text-sm' }, 
        () => isActive.value ? 'Party time! 🎉' : 'So sad... 💔'
    ),
    Button({ 
        color: 'primary',
        size: 'sm',
        onclick: () => { isActive.value = !isActive.value; }
    }, 'Toggle from button')
);

$('#demo').insert(demo);

Props

Sub-components

Effects

Hamburger Menu Icon

Theme Toggle (Sun/Moon)