No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    q-item-section dynamic font class doesn't work.

    Framework
    2
    2
    181
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      aXiDz last edited by aXiDz

      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:
      bda107f1-588d-4dbf-b5f3-6cb3d961b396-image.png
      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:
      2283daf4-3667-4c32-8d00-ad7f8472aaf8-image.png

      I’m missing something?

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @aXiDz last edited by

        @aXiDz

        If your create a codepen.io( very simple by extending one of the quasar examples codepens) people can help you better.

        1 Reply Last reply Reply Quote 0
        • First post
          Last post