F7-list-item icon

1

Hey all,

Using the following (from the docs),

<f7-popover class="popover-menu">
  <f7-list>
    <f7-list-item link="#" title="Ivan Petrov" after="CEO">
      <template #media>
        <f7-icon f7="house"></f7-icon>
      </template>
    </f7-list-item>

Renders the icon at the end of the list, not the start. See:

Screenshot 2021-03-11 at 18.24.49

This works as expected.

    <li>
      <div class="item-content">
        <div class="item-media"><i class="f7-icons">resize_v</i></div>
        <div class="item-inner">
          <div class="item-title">Resize</div>
        </div>
      </div>
    </li>

Issue with the Vue render?

2

Is it Framework7 v6?

3

It’s version 5.7.14. Parking the migration until this ships.

4

As I remember in Vue 2, slots should be specified via slot=“media” attribute, not using template tag

5

Thanks for the suggestion. Unfortunately no luck with either:

<slot name="media"><f7-icon f7="house"></f7-icon></slot>
or <template v-slot:media>
6

<f7-icon slot=“media” ...

1 Like
7

Haha! Literally the only thing other thing I could have tried. Thanks so much (again as always)!