Indicator

Basic Example

Notification badge on inbox

const { default: Indicator } = await import('/components/layout/indicator.js');
const { default: Badge } = await import('/components/data-display/badge.js');
const { default: Button } = await import('/components/actions/button.js');

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

const count = signal(3);

const demo = div({ class: 'flex gap-8' },
    Indicator({},
        Indicator.Item({},
            Badge({ color: 'primary' }, () => count.value)
        ),
        Button({ 
            onclick: () => { count.value++; }
        }, 'Messages')
    ),
    Indicator({},
        Indicator.Item({ position: 'bottom-end' },
            Badge({ color: 'success', size: 'xs' })
        ),
        div({ class: 'avatar' },
            div({ class: 'w-12 rounded-full' },
                tags.img({ src: 'https://i.pravatar.cc/100?img=5' })
            )
        )
    )
);

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