@qr-x/vue
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

⌛

Installation

npm install @qr-x/vue

Usage

You can also try QR-X in action here or follow the examples below.

Solid

<script>
import QRX from '@qr-x/vue'
</script>

<template>
  <QRX data="https://qr-x.devtrice.dev" color="#0284c7" />
</template>

Gradient

Linear Gradient

<script>
import QRX from '@qr-x/vue'
</script>

<template>
  <QRX
    data="https://qr-x.devtrice.dev"
    :gradient="{
      colors: ['#f97316', '#f59e0b', '#facc15'],
    }"
  />
</template>

Radial Gradient

<script>
import QRX from '@qr-x/vue'
</script>

<template>
  <QRX
    data="https://qr-x.devtrice.dev"
    :gradient="{
      type: 'radial',
      colors: ['#f97316', '#f59e0b', '#facc15'],
    }"
  />
</template>

Fill Image

<script>
import QRX from '@qr-x/vue'
</script>

<template>
  <QRX data="https://qr-x.devtrice.dev" fillImage="https://images.unsplash.com photo-1682687218608-5e2522b04673" />
</template>

Brand

Brand Image

<script>
  import QRX from '@qr-x/vue'
</script>

<QRX
  data="https://qr-x.devtrice.dev"
  brand={{ src: 'https://images.unsplash.com/photo-1682687218608-5e2522b04673', style: 'width: 4rem; height: 4rem' }}
/>

Brand Component

<script>
import QRX from '@qr-x/vue'
</script>

<QRX data="https://qr-x.devtrice.dev">
  <template v-slot:brand>
    <video
      src="https://videos.pexels.com/video-files/8333185/8333185-hd_1080_1080_30fps.mp4"
      :style="{ width: '2.5rem', height: '2.5rem', border: '2px solid white', borderRadius: '50%' }"
      muted
      autoplay
    />
  </template>
</QRX>

Props

Name Type Default
data string
level 'L' | 'M' |'Q' | 'H' 'L'
shapes.body 'square' | 'circle' | 'leaf' | 'rounded' 'square'
shapes.eyeball 'square' | 'circle' | 'leaf' | 'rounded' 'square'
shapes.eyeframe 'square' | 'circle' | 'leaf' | 'rounded' 'square'
gradient.type 'linear' | 'radial'
gradients.colors string[] | {value: string, stop: number}
gradients.rotate number (This property only exist if gradient.type is 'radial') 45
fillImage string
brand ImgHTMLAttributes

Readme

Keywords

Package Sidebar

Install

npm i @qr-x/vue

Weekly Downloads

1

Version

1.1.1

License

MIT

Unpacked Size

82.3 kB

Total Files

6

Last publish

Collaborators

  • zeyarpaing
  • sudoaugustin