F7-list/F7-list-item Horizontal Display

1

Hi All,

I have the below codes displaying users in vertical list. I want to display same list horizontally. How can I do this?

<f7-list class="search-list searchbar-found">
  <f7-list-item
    v-for="(frd, index) in friends"
    :key="index"
    :title="frd.name"
    :text="frd.latest_message"
    @click="gotoChat(frd)"
  >
    <f7-badge color="red" slot="after-title" v-if="frd.message_count > 0">{{
      frd.message_count
    }}</f7-badge>
  </f7-list-item>
</f7-list>

Thanks

Nosa Osahon

2

From: https://framework7.io/vue/list-item.html

  • f7-list-item-row - list item row element for custom layout
  • f7-list-item-cell - list item cell element for custom layout
1 Like