V6: <style> tag doesn't work on Componets

<style> tags seems don’t work inside v6 components…

You should provide more information if you wish anybody help you:

  • F7 exact version
  • Pure JavaScript, VueJS, React, etc?
  • Code example

It’s working for me, I will leave you an example in F7-Core (pure javascript):
item-card.f7.html

  <div class="card demo-card-header-pic">

    <div style="background-image:url(${itemData.urlImageSquare})"

      class="card-header align-items-flex-end">${itemData.date}</div>

    <div class="card-content card-content-padding">

      <p class="title">${itemData.name}</p>

      <p>${itemData.summary}</p>

    </div>

    <div class="card-footer">

      <a href="#" class="link" @click="${() => onClickSeeMore(itemData.id)}">${i18next.t('lblSeeMore')}</a>

    </div>

  </div>

</template>

<script>

  import i18next from 'i18next';

  // export main component

  export default (props, { $f7 }) => {

    let itemData = props.data;

    function onClickSeeMore(id) {

      $f7.views.main.router.navigate('/page-detail/', {

        props: {

          id: id

        }

      });

    }

    return $render;

  }

</script>

<style>

  .demo-card-header-pic .card-header {

    height: 40vw;

    background-size: cover;

    background-position: center;

    color: #fff;

  }

  .demo-card-header-pic .card-content-padding .title {

    color: #8e8e93;

    font-weight: 700;

  }

  .demo-card-header-pic .card-footer {

    flex-direction: row-reverse;

  }

</style>

Solved in this thead: updating framework7-loader from 3.0.1 to 3.0.2 in the way described:

1 Like