slidev-addon-qrcodecurrentslide

QR-Code component for sli.dev with default url to current location (used for poll) (fork of kravetsone/slidev-addon-qrcode )

---
layout: center
addons:
    - slidev-addon-qrcodecurrentslide
---

<div class="grid grid-cols-3 gap-4 w-full">
  <div class="col-span-2">
<!-- Use with slidev poll component addon
<Poll question="What is your favorite color ?" 
:correctAnswer="[0]"
:controlled="true"
 :clearable="true" 
 displayResults="poll">

- **Red**
- **Green**
- **Blue**

</Poll>
-->

# What is your favorite color ?
  
  </div>


  <div class="col-span-1">
<QrCodeCurrentSlide
    :width="300"
    :height="300"
    color="blue"
/>
</div>
</div>

Installation

npm i slidev-addon-qrcodecurrentslide

Usage

• Define this addon in frontmatter

addons:
    - slidev-addon-qrcodecurrentslide

• or in package.json

 "slidev": {
    "addons": [
      "slidev-addon-qrcodecurrentslide"
    ]
  },

Components

QRCode

<QrCodeCurrentSlide
    :width="300"
    :height="300"
    color="blue"
    image="logo.svg"
/>
<!-- logo must be pushed in public folder -->

Props for the components are the following

interface QRCodeOption { 
    width : number,
    height: number,
    color: string,
    image:string,
    type: string,
    margin:number
    dotsType:DotType,
    data:string
}

const props = withDefaults(defineProps<QRCodeOption>(), {
    width: 200,
    height: 200,
    color:"blue",
    image : "logo.svg",
    margin: 5,
    dotsType: "extra-rounded",
    data:window.location.href
});

Find more about options in qr-code-styling repo

Thanks

• qr-code-styling - this addon use it under the hood