Could you include the component from https://quasar.dev/vue-components/slide-item/ in the encapsulation?

[void-gfly]

Could you include the component from https://quasar.dev/vue-components/slide-item/ in the encapsulation?

The QSlideItem Vue component is essentially a QItem with two additional slots (left and right) which allows the user to drag it to one of the sides in order to apply a specific action.

[falkoschindler]

That's a great idea, @void-gfly!

Here's a proof of concept using the generic ui.element:

with ui.list().classes('border'):
    ui.item('normal item')
    with ui.element('q-slide-item') as slide_item:
        ui.item('slide item')
        with slide_item.add_slot('left'):
            ui.icon('favorite')
        with slide_item.add_slot('right'):
            ui.icon('delete')
        slide_item.on('left', lambda: (ui.notify('Favorite added'), slide_item.run_method('reset')))
        slide_item.on('right', lambda: (ui.notify('Item deleted'), slide_item.run_method('reset')))

I'll add this element to our wishlist. Maybe someone from the community would like to give it a try? 🙂

[falkoschindler]

This feature has just been released in version 2.12.0 ✔️