I have a list, changed my code and wnted to use f7-list-group for grouping however I lost my visuality. Before I used ul and li for final item listing
I prefer media-list (which is at bottom) but I need to find a away to manipulate image parameter.
I want images left side
I want shorter items (no empty spaces)
f7-list
f7-list-group.date(v-for='(groups, key) in groupedContacts' :key="key", v-show='!isSearch')
f7-list-item(:title="key" group-title="")
f7-list-item(v-for="contact in groups", :key="key", :title="contact.firstName + ' ' + contact.lastName")
.item-content
.item-media
img.avatar-circle(:src="contact.photoUrl || noImg" width="44")
- When I add css test-icon-left I get this
img.test-icon-left.avatar-circle(:src="contact.photoUrl || noImg" width="44")
- If I change intendation of these Items get shorter but image overlaps the name
.item-content
.item-media
img.test-icon-left.avatar-circle(:src="contact.photoUrl || noImg" width="44")
- If I comment item-content and itemmedia I get this
f7-list
f7-list-group.date(v-for='(groups, key) in groupedContacts' :key="key", v-show='!isSearch')
f7-list-item(:title="key" group-title="")
f7-list-item(v-for="contact in groups", :key="key", :title="contact.firstName + ' ' + contact.lastName")
//-.item-content
//-.item-media
img.test-icon-left.avatar-circle(:src="contact.photoUrl || noImg" width="44")
- Finally, if I use media-list (I think most proper way) I get this. Applying avatar-circle to f7-list-item doesnt make any sense
f7-list(media-list="")
f7-list-group.date(v-for='(groups, key) in groupedContacts' :key="key", v-show='!isSearch')
f7-list-item(:title="key" group-title="")
f7-list-item(:media="contact.photoUrl", v-for="contact in groups", :key="key", :title="contact.firstName + ' ' + contact.lastName")