Join

Basic Example

Button group and input group

const { default: Join } = await import('/components/layout/join.js');
const { default: Button } = await import('/components/actions/button.js');
const { default: Input } = await import('/components/data-input/input.js');

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

const email = signal('');

const demo = div({ class: 'flex flex-col gap-4' },
    // Button group
    Join({},
        Button({ class: 'join-item' }, 'Previous'),
        Button({ class: 'join-item', color: 'primary' }, 'Current'),
        Button({ class: 'join-item' }, 'Next')
    ),
    // Input with button
    Join({},
        Input({ 
            class: 'join-item',
            placeholder: 'Enter your email',
            value: () => email.value,
            oninput: (e) => { email.value = e.target.value; }
        }),
        Button({ class: 'join-item', color: 'primary' }, 'Subscribe')
    )
);

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