<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