kopia lustrzana https://github.com/shoelace-style/shoelace
update changelog
Cory LaViska
rodzic
eeb1a097a3
commit
b09bfdd01d
|
|
@ -56,6 +56,7 @@
|
|||
- [Format Date](/components/format-date.md)
|
||||
- [Format Number](/components/format-number.md)
|
||||
- [Include](/components/include.md)
|
||||
- [QR Code](/components/qr-code.md)
|
||||
- [Relative Time](/components/relative-time.md)
|
||||
- [Resize Observer](/components/resize-observer.md)
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
# QR Code
|
||||
|
||||
[component-header:sl-qr-code]
|
||||
|
||||
Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
|
||||
|
||||
QR codes are useful for providing small pieces of information to users who can quickly scan them with a smartphone. Most smartphones have built-in QR code scanners, so simply pointing the camera at a QR code will decode it and allow the user to visit a website, dial a phone number, read a message, etc.
|
||||
|
||||
```html preview
|
||||
<sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Shoelace on the web!"></sl-qr-code>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Colors
|
||||
|
||||
Use the `fill` and `background` props to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.
|
||||
|
||||
```html preview
|
||||
<sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></sl-qr-code>
|
||||
```
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop to change the size of the QR code.
|
||||
|
||||
```html preview
|
||||
<sl-qr-code value="https://shoelace.style/" size="64"></sl-qr-code>
|
||||
```
|
||||
|
||||
### Radius
|
||||
|
||||
Create a rounded effect with the `radius` prop.
|
||||
|
||||
```html preview
|
||||
<sl-qr-code value="https://shoelace.style/" radius="0.5"></sl-qr-code>
|
||||
```
|
||||
|
||||
### Error Correction
|
||||
|
||||
QR codes can be rendered with various levels of [error correction](https://www.qrcode.com/en/about/error_correction.html) that can be set using the `error-correction` attribute. This example generates four codes with the same value using different error correction levels.
|
||||
|
||||
```html preview
|
||||
<div class="qr-error-correction">
|
||||
<sl-qr-code value="https://shoelace.style/" error-correction="L"></sl-qr-code>
|
||||
<sl-qr-code value="https://shoelace.style/" error-correction="M"></sl-qr-code>
|
||||
<sl-qr-code value="https://shoelace.style/" error-correction="Q"></sl-qr-code>
|
||||
<sl-qr-code value="https://shoelace.style/" error-correction="H"></sl-qr-code>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.qr-error-correction {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
[component-metadata:sl-qr-code]
|
||||
|
|
@ -6,9 +6,10 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
|
|||
|
||||
_During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
|
||||
|
||||
## Next
|
||||
## 2.0.0-beta.39
|
||||
|
||||
- Added the `system` icon library and updated all components to use this instead of the default icon library [#420](https://github.com/shoelace-style/shoelace/issues/420)
|
||||
- Added experimental `sl-qr-code` component
|
||||
- Added `system` icon library and updated all components to use this instead of the default icon library [#420](https://github.com/shoelace-style/shoelace/issues/420)
|
||||
- Updated to esbuild 0.8.57
|
||||
- Updated to lit 2.0.0-rc.1 and lit-html 2.0.0-rc.2
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
"@shoelace-style/animations": "^1.1.0",
|
||||
"color": "^3.1.3",
|
||||
"lit": "^2.0.0-rc.1",
|
||||
"lit-html": "^2.0.0-rc.2"
|
||||
"lit-html": "^2.0.0-rc.2",
|
||||
"qr-creator": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/color": "^3.0.1",
|
||||
|
|
@ -3623,6 +3624,11 @@
|
|||
"once": "^1.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/qr-creator": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/qr-creator/-/qr-creator-1.0.0.tgz",
|
||||
"integrity": "sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ=="
|
||||
},
|
||||
"node_modules/qs": {
|
||||
"version": "6.2.3",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.2.3.tgz",
|
||||
|
|
@ -8134,6 +8140,11 @@
|
|||
"once": "^1.3.1"
|
||||
}
|
||||
},
|
||||
"qr-creator": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/qr-creator/-/qr-creator-1.0.0.tgz",
|
||||
"integrity": "sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ=="
|
||||
},
|
||||
"qs": {
|
||||
"version": "6.2.3",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.2.3.tgz",
|
||||
|
|
|
|||
|
|
@ -40,7 +40,8 @@
|
|||
"@shoelace-style/animations": "^1.1.0",
|
||||
"color": "^3.1.3",
|
||||
"lit": "^2.0.0-rc.1",
|
||||
"lit-html": "^2.0.0-rc.2"
|
||||
"lit-html": "^2.0.0-rc.2",
|
||||
"qr-creator": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/color": "^3.0.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
@use '../../styles/component';
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
import { LitElement, html, unsafeCSS } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators';
|
||||
import { styleMap } from 'lit-html/directives/style-map';
|
||||
import { watch } from '../../internal/decorators';
|
||||
import QrCreator from 'qr-creator';
|
||||
import styles from 'sass:./qr-code.scss';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
* @status experimental
|
||||
*
|
||||
* @part base - The component's base wrapper.
|
||||
*/
|
||||
@customElement('sl-qr-code')
|
||||
export default class SlQrCode extends LitElement {
|
||||
static styles = unsafeCSS(styles);
|
||||
|
||||
@query('canvas') canvas: HTMLElement;
|
||||
|
||||
/** The QR code's value. */
|
||||
@property() value = '';
|
||||
|
||||
/** The label used when screen readers announce the code. If unspecified, the value will be used. */
|
||||
@property() label = '';
|
||||
|
||||
/** The size of the code's overall square in pixels. */
|
||||
@property({ type: Number }) size = 128;
|
||||
|
||||
/** The fill color. This can be any valid CSS color, but not a CSS custom property. */
|
||||
@property() fill = '#000';
|
||||
|
||||
/** The background color. This can be any valid CSS color or `transparent`, but not a CSS custom property. */
|
||||
@property() background = '#fff';
|
||||
|
||||
/** The edge radius of each module. Must be between 0 and 0.5. */
|
||||
@property({ type: Number }) radius = 0;
|
||||
|
||||
/* The level of error correction to use. */
|
||||
@property({ attribute: 'error-correction' }) errorCorrection: 'L' | 'M' | 'Q' | 'H' = 'H';
|
||||
|
||||
firstUpdated() {
|
||||
this.generate();
|
||||
}
|
||||
|
||||
@watch('background')
|
||||
@watch('errorCorrection')
|
||||
@watch('fill')
|
||||
@watch('radius')
|
||||
@watch('size')
|
||||
@watch('value')
|
||||
generate() {
|
||||
QrCreator.render(
|
||||
{
|
||||
text: this.value,
|
||||
radius: this.radius,
|
||||
ecLevel: this.errorCorrection,
|
||||
fill: this.fill,
|
||||
background: this.background === 'transparent' ? null : this.background,
|
||||
// We draw the canvas larger and scale its container down to avoid blurring on high-density displays
|
||||
size: this.size * 2
|
||||
},
|
||||
this.canvas
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div
|
||||
class="qr-code"
|
||||
part="base"
|
||||
style=${styleMap({
|
||||
width: `${this.size}px`,
|
||||
height: `${this.size}px`
|
||||
})}
|
||||
>
|
||||
<canvas role="img" aria-label=${this.label || this.value}></canvas>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-qr-code': SlQrCode;
|
||||
}
|
||||
}
|
||||
|
|
@ -28,6 +28,7 @@ export { default as SlMenuItem } from './components/menu-item/menu-item';
|
|||
export { default as SlMenuLabel } from './components/menu-label/menu-label';
|
||||
export { default as SlProgressBar } from './components/progress-bar/progress-bar';
|
||||
export { default as SlProgressRing } from './components/progress-ring/progress-ring';
|
||||
export { default as SlQrCode } from './components/qr-code/qr-code';
|
||||
export { default as SlRadio } from './components/radio/radio';
|
||||
export { default as SlRadioGroup } from './components/radio-group/radio-group';
|
||||
export { default as SlRange } from './components/range/range';
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue