NG-ALAIN- CURD
stTable svView seEdit sfDynamic Form LIB
- Basic
avatar-listAvatarList count-downCount down down-fileDownload file letLet mediaHTML5 Media reuse-tabReuse Route Tab _srcImage loadingLoading indicator pdfPdf qrQR lodopLodop Print xlsxExcel onboardingOnboarding zipZip ChartG2 LIB Theme System LIB Utils LIB
- Form
error-collectError Collect range-pickerData Range
- Layout
ellipsisEllipsis exceptionException footer-toolbarFooterToolbar full-contentFull Screen Workspace global-footerGlobal footer page-headerPage Header resultResult sgSimple Grid tag-selectTag Select
- Business
notice-iconNotification menu quick-menuQuick Menu Authentication LIB Access Control List LIB Cache LIB Mock LIB
- Other
auto-focusAuto focus highlightHighlight
Generate a QR code based on qrious.
Qr libary is lazy loading by default，you can change the default CDN path via Global Configuration. By default: https://cdn.jsdelivr.net/npm/qrious/dist/qrious.min.js. Or install dependence via npm i --save qrious, and import script path in angular.json.
Use local path
// angular.json
{
"glob": "**/qrious.min.js",
"input": "./node_modules/qrious/dist",
"output": "assets/qrious/"
}// global-config.module.ts
const alainConfig: AlainConfig = {
qr: {
lib: '/assets/qrious/qrious.min.js'
}
};Examples
url
Simplest of usage.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'components-qr-basic',
template: `
<h3>{{ type }}</h3>
<qr [value]="value"></qr>
<div>
<button *ngFor="let t of types" nz-button (click)="change(t)">{{ t }}</button>
</div>
`,
})
export class ComponentsQrBasicComponent implements OnInit {
types = ['url', 'email', 'tel', 'cn', 'vcard'];
value = '';
type = '';
change(type: string): void {
this.type = type;
switch (type) {
case 'url':
this.value = 'https://ng-alain.com/';
break;
case 'email':
this.value = 'mailto:cipchk@qq.com';
break;
case 'tel':
this.value = 'tel:15900000000';
break;
case 'cn':
this.value = '你好🇨🇳';
break;
case 'vcard':
this.value = `BEGIN:VCARD
VERSION:4.0
N:色;卡;;Mr.;
FN:卡色
ORG:NG-ALAIN
TITLE:NG-ALAIN
PHOTO;MEDIATYPE=image/svg:https://ng-alain.com/assets/img/logo-color.svg
TEL;TYPE=work,voice;VALUE=uri:tel:15900000000
ADR;TYPE=WORK;PREF=1;LABEL="中国上海":;;上海;中国
EMAIL:cipchk@qq.com
x-qq:94458893
END:VCARD`;
break;
}
}
ngOnInit(): void {
this.change('url');
}
}Get QR code (dataURL value) via change.
import { Component } from '@angular/core';
@Component({
selector: 'components-qr-design',
template: `
<div nz-row [nzGutter]="24">
<div nz-col [nzSpan]="8" class="text-center">
<qr
[value]="value"
[background]="background"
[backgroundAlpha]="backgroundAlpha"
[foreground]="foreground"
[foregroundAlpha]="foregroundAlpha"
[level]="level"
[mime]="mime"
[padding]="padding"
[size]="size"
(change)="change($event)"
style="border:1px solid #999"
></qr>
</div>
<div nz-col [nzSpan]="16">
<se-container col="1">
<se label="背景">
<nz-input-group>
<div nz-row [nzGutter]="8">
<div nz-col nzSpan="12">
<input nz-input type="color" [(ngModel)]="background" [ngModelOptions]="{ standalone: true }" />
</div>
<div nz-col nzSpan="12">
<nz-input-number
[(ngModel)]="backgroundAlpha"
[nzMin]="0"
[nzMax]="1"
[nzStep]="0.1"
[ngModelOptions]="{ standalone: true }"
></nz-input-number>
</div>
</div>
</nz-input-group>
</se>
<se label="前景">
<nz-input-group>
<div nz-row [nzGutter]="8">
<div nz-col nzSpan="12">
<input nz-input type="color" [(ngModel)]="foreground" [ngModelOptions]="{ standalone: true }" />
</div>
<div nz-col nzSpan="12">
<nz-input-number
[(ngModel)]="foregroundAlpha"
[nzMin]="0"
[nzMax]="1"
[nzStep]="0.1"
[ngModelOptions]="{ standalone: true }"
></nz-input-number>
</div>
</div>
</nz-input-group>
</se>
<se label="误差">
<nz-select [(ngModel)]="level" [ngModelOptions]="{ standalone: true }">
<nz-option nzValue="L" nzLabel="L"></nz-option>
<nz-option nzValue="M" nzLabel="M"></nz-option>
<nz-option nzValue="Q" nzLabel="Q"></nz-option>
<nz-option nzValue="H" nzLabel="H"></nz-option>
</nz-select>
</se>
<se label="Mime">
<nz-select [(ngModel)]="mime" [ngModelOptions]="{ standalone: true }">
<nz-option nzValue="image/png" nzLabel="image/png"></nz-option>
<nz-option nzValue="image/jpeg" nzLabel="image/jpeg"></nz-option>
<nz-option nzValue="image/gif" nzLabel="image/gif"></nz-option>
</nz-select>
</se>
<se label="内边距">
<nz-input-number [(ngModel)]="padding" [ngModelOptions]="{ standalone: true }" [nzMin]="0" [nzMax]="100"></nz-input-number> px
</se>
<se label="大小">
<nz-input-number
[(ngModel)]="size"
[ngModelOptions]="{ standalone: true }"
[nzMin]="100"
[nzMax]="1000"
[nzStep]="padding"
></nz-input-number>
px
</se>
</se-container>
</div>
</div>
`,
})
export class ComponentsQrDesignComponent {
value = 'https://ng-alain.com/';
background = '#ffffff';
backgroundAlpha = 1.0;
foreground = '#000000';
foregroundAlpha = 1.0;
level = 'L';
mime = 'image/png';
padding = 10;
size = 220;
change(dataURL: string): void {
console.log(dataURL);
}
}API
qr
| Property | Description | Type | Default | Global Config |
|---|---|---|---|---|
[value] | Value encoded within the QR code | string | () => string | - | |
[background] | Background colour of the QR code | string | white | ✅ |
[backgroundAlpha] | Background alpha of the QR code | number | 1 | ✅ |
[foreground] | Foreground colour of the QR code | string | white | ✅ |
[foregroundAlpha] | Foreground alpha of the QR code | number | 1 | ✅ |
[level] | Error correction level of the QR code | 'L','M','Q','H' | 'L' | ✅ |
[mime] | MIME type used to render the image for the QR code | string | image/png | ✅ |
[padding] | Padding for the QR code (pixels) | number | 10 | ✅ |
[size] | Size of the QR code (pixels) | number | 220 | ✅ |
[delay] | Delayed rendering, unit: ms | number | 0 | ✅ |
(change) | change event | EventEmitter<string> | - |
FAQ
Custom LOGO
Refer to #100.
Why not center
Please refer to #111 for the reason. The solution is to set padding to null, for example:
<qr [value]="value" [padding]="null"></qr>