@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> <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> <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> <q-flashcard-section class="fit flex justify-center items-end"> <a href="#" class="my-button">Learn More</a> </q-flashcard-section> </q-flashcard-section> </q-flashcard> <div class="text-h5 q-pt-sm">Combo Demo #1</div> </div> </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 ?
-
@ravimeetsu Excellent question! Use the
no-hover
property for clicks and mobile -
@Hawkeye64 are the events passed thru? And maybe add method so devs can control when to activate the animation.
-
Another secret feature of the Quasar.
I feel lucky clicking the forum today.
Now let me see if I can create a learning app with that