q-item-section dynamic font class doesn't work.
-
Hello,
I’m trying to create text input and font selection based on that input.<q-card flat class="text-grey-4 my-card"> <q-card-section> <q-input v-model="text" /> </q-card-section> <q-card-section> <div class="q-gutter-md"> <q-select filled v-model="selectedFont" :options="fonts" stack-label label="Text Placeholder Content" > <template v-slot:option="scope"> <q-item v-bind="scope.itemProps" v-on="scope.itemEvents"> <q-item-section> <q-item-label v-html="scope.opt" /> </q-item-section> <q-item-section append :class="fonts[scope.index]"> {{text}}</q-item-section> </q-item> </template> </q-select> </div> </q-card-section> </q-card>
Small names array:
fonts: ['Arial', 'Helvetica-Bold', 'Boombox'],
Additionally importing more fonts via CSS:
@font-face font-family: Arial src: url(/fonts/arial.tff) // declare a class which applies it .Arial font-family: 'Arial' @font-face font-family: Helvetica-Bold src: url(/fonts/Helvetica-Bold.ttf) // declare a class which applies it .Helvetica-Bold font-family: 'Helvetica-Bold' @font-face font-family: Boombox src: url(/fonts/BoomBox.tff) // declare a class which applies it .BoomBox font-family: 'BoomBox'
Gives me the following output:
Looking good right? except it’s not the font…
When changing to:<q-item-section append class="BoomBox"> {{text}}</q-item-section>
It shows the real font:
I’m missing something?
-
If your create a codepen.io( very simple by extending one of the quasar examples codepens) people can help you better.