How to add a button in list-item's "after" slot?

Questions
1

I have a f7-list-item component with link parameter, i.e. clickable list item.
When adding <f7-button slot="after" @click.stop.prevent="clicked()"> and clicking this button I see that material ripple animation on this button, but also the whole list item receives this click and becomes grayed (it’s a.item-link gets active-state class), which is not desired behaviour.

What is the right way to add a button to a list item to get correct user experience of clicking just a button but not a list item itself?

2
  1. Add prevent-active-state-propagation to button https://framework7.io/docs/active-state.html
  2. Add type="button" to button
  3. Use only single click handler on parent list-item and check for event.target in its handler to detect was it button clicked or not
3

@nolimits4web First I would like to say thanks for this awesome framework. Also, I need to say, that all of your document and explanation is really difficult, please give at lease some small sample to understand the basic.