@dgrammatiko/qr-element
Version:
Creates a QR image
77 lines (62 loc) • 1.72 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Element</title>
<meta name="description" content="A simple QR Code Web Component">
<script type="module" src="./src/index.mjs" blocking="rendering"></script>
<style>
/** Prevent CLS */
qr-element {
display: block;
aspect-ratio: 1;
width: 300px;
height: 300px;
/** Custom colours */
&.blue {
background-color: gold;
&::part(canvas) {
--canvas-fill: blue;
}
}
}
/** basic page styling */
:root {
color-scheme: dark light;
}
a {
color: lightblue;
}
body {
margin-inline-start: auto;
margin-inline-end: auto;
max-width: 30rem;
}
ul {
padding: 1rem;
background-color: #333;
list-style-type: none;
display: flex;
gap: 2rem;
}
</style>
</head>
<body>
<h1>Rendering a QR code</h1>
<h2>just pass the string to the input attribute</h2>
<qr-element input="https://dgrammatiko.dev"></qr-element>
<hr>
<h2>change the size passing the px to the width attribute</h2>
<qr-element input="https://dgrammatiko.dev" width="444px"></qr-element>
<hr>
<h2> Custom colors: using the host background-color and the ::part(canvas)</h2>
<qr-element class="blue" input="https://dgrammatiko.dev"></qr-element>
<hr>
<ul>
<li><a href="https://github.com/dgrammatiko/qr-element">Github repo</a></li>
<li><a href="https://github.com/dgrammatiko/qr-element">NPM package</a></li>
<li><a href="https://dgrammatiko.dev">by dGrammatiko</a></li>
</ul>
</body>
</html>