ui

QFlashcard

QFlashcard is a Quasar component that provides CSS transition flashcards for Vue and Quasar applications.

Usage

Quasar CLI Project

Install the App Extension.

Or install the UI package directly:

pnpm add @quasar/quasar-ui-qflashcard
# or
bun add @quasar/quasar-ui-qflashcard
# or
yarn add @quasar/quasar-ui-qflashcard
# or
npm install @quasar/quasar-ui-qflashcard
# or, in a Quasar CLI app
quasar ext add @quasar/qflashcard

Then create and register a boot file:

import { defineBoot } from '#q-app'
import VuePlugin from '@quasar/quasar-ui-qflashcard'
import '@quasar/quasar-ui-qflashcard/dist/index.css'

export default defineBoot(({ app }) => {
  app.use(VuePlugin)
})

Vue 3 Project

import { createApp } from 'vue'
import VuePlugin from '@quasar/quasar-ui-qflashcard'
import '@quasar/quasar-ui-qflashcard/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(VuePlugin)
app.mount('#app')

Component Import

<style src="@quasar/quasar-ui-qflashcard/dist/index.css"></style>

<script setup lang="ts">
  import { QFlashcard, QFlashcardSection } from '@quasar/quasar-ui-qflashcard'
</script>

UMD Variant

The UMD bundle exports window.QFlashcard.

<link
  href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qflashcard/dist/index.min.css"
  rel="stylesheet"
  type="text/css"
/>
<script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qflashcard/dist/index.umd.min.js"></script>

Setup

This project is a pnpm workspace mono-repo.

pnpm install
pnpm build:ui
pnpm build:docs

Support

If QFlashcard is useful in your workflow and you want to support ongoing maintenance:

• GitHub Sponsors: https://github.com/sponsors/hawkeye64
• PayPal: https://paypal.me/hawkeye64

License

MIT (c) Jeff Galbraith jeff@quasar.dev