@quasar/qflashcard v1.0.0-beta.5 Release!

  • https://github.com/quasarframework/app-extension-qflashcard/releases/tag/v1.0.0-beta.5

    • Updated to latest @quasar/app extension api
    • Ensured component will compile for SSR

  • What would be the responsive and working way to fit an image into the flashcard?
    It mostly ignores the image style and is only shown partly - i some places. Seems to dependof elements outside of it. Any tipps?

    Also img works, q-img not.

  • As implicit in using your flashcards, I think they are great.
    May I ask for an improvement in the example section? It would be great to see the source code of the different examples, so I can easier work with them. Reverse engineering is so cumbersome ;).
    ( https://quasarframework.github.io/app-extension-qflashcard/demo/dist/spa/#/ )

    Even for your ONE example, I need to figure out the style myself. Your work IS great, your documentation isn’t. But in adoption of tech, documentation is a big factor. And from a creators perspective, everything is known, everything is straight forward - if it wasn’t the creator wouldn’t have done it this way. Implicit knowledge is the keyword here.

    Talking specifically of your extensions: not being documented at least in a intermediate manner, it hurts your great results. The best tool won’t be used if only few people are able to understand how it works and have to be used.

  • And yes, you can have a look in the source. As being fullstack including devops myself, I do have a wide range of tech and information need to know. The better the documentation, the less hazzle do people like me have. And I bet, I am not the only one not having 10 years frontend experience or specialization in node / vue / css and companion techs. 😉

  • One specific question / feature request I do have: How would I do it that one section is shown with mouse out and “effects out” - while another section “effects in” with mouse over.
    Would be great for labels as in titles and descriptions.

    Maybe “inversed transition” is the key word here?

  • Here’s an example:

          <div class="q-pa-sm">
            <div class="description text-center rounded-borders">
              <p>  {{ touchOrClick }} the example below:</p>
              <q-flashcard :style="style">
                <q-flashcard-section transition="flip-left-out">
                  <img src="statics/1.jpg" width=300 height=200>
                <q-flashcard-section transition="flip-left-in" class="fit" style="top:0;background-color: rgba(219,127,8, 0.7);">
                  <q-flashcard-section class="text-center my-header">
                    Combo Demo #1
                  <q-flashcard-section class="my-text">
                    For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.
                  <q-flashcard-section class="fit flex justify-center items-end">
                    <a href="#" class="my-button">Learn More</a>
              <div class="text-h5 q-pt-sm">Combo Demo #1</div>

    And, a good way to add an image is htorugh the background-image css attribute.

    style () {
          return {
            width: '320px',
            height: '220px',
            backgroundImage: `url('statics/bgimg.jpg')`,
            padding: '10px',
            border: '10px solid #fff',
            textAlign: 'center',
            boxShadow: '1px 1px 2px #e6e6e6'

    You can find all the demo source here: https://github.com/quasarframework/app-extension-qflashcard/blob/dev/demo/src/pages/Index.vue

  • Will try the bg image approach. I think this could be my solution. Will report back.

  • @kp Hopefully it worked out for you.

  • Hello @Hawkeye64

    Thank you for this wonderful plugin and your last example That really helped!

    Question: Is it possible to flip cards on click instead of hover? Also, how would hover work on a mobile device ?

Log in to reply