Using Vue, I want a list where:
- each item has a checkbox, which can be toggled by tapping on it on the left
- smart select or link opened by tapping on the item outside the checkbox
A lot of mobile email apps, including Gmail, work this way. If you tap on email in list, it opens. But you can also tap on a checkbox on left side of the item to do bulk select.
This requires a bit of custom styles, here is the example https://jsfiddle.net/s2bqh75j/
That’s awesome! Thanks so much!
One extra note about styling is that the checkbox in general is hard to press on because it’s small. I find it helps to add padding to it to make a larger tap region. Maybe the default checkbox style should have a larger padding region?
padding: .5rem; // need padding to make it easier to tap
margin-top: calc(-1 * var(--f7-checkbox-size) / 2 - .5rem);
left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - .5rem);