概述

---

立即下載Kendo UI for Angular

二維碼組件是Kendo UI for Angular的一部分，這是一個專業(yè)級的UI庫，擁有100多個組件，用于構(gòu)建現(xiàn)代且功能豐富的應(yīng)用程序。

下面的例子演示了二維碼的作用。

example：

查看源代碼：

• app.component.ts：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
styles: [`
.k-card {
width: 200px;
}
`],
template: `
<div class="k-card-deck">
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
URL
</div>
</div>
<div class="k-card-body">

<kendo-qrcode value="https://www.telerik.com/kendo-angular-ui/"
errorCorrection="M">
</kendo-qrcode>

</div>
</div>
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
Location
</div>
</div>
<div class="k-card-body">

<kendo-qrcode value="geo:42.65956,23.3782001;crs=wgs84;u=40"
errorCorrection="H" color="#166a83">
</kendo-qrcode>

</div>
</div>
<div class="k-card k-card-type-rich">
<div class="k-card-header">
<div class="k-card-title">
E-mail
</div>
</div>
<div class="k-card-body">

<kendo-qrcode value="mailto:clientservice@progress.com"
color="#e15613">
</kendo-qrcode>

</div>
</div>
</div>
`
})
export class AppComponent {
}

• app.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BarcodesModule } from '@progress/kendo-angular-barcodes';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule, BarcodesModule, ButtonsModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

export class AppModule { }

• main.ts:

import './polyfills';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

主要特點

編碼和糾錯——二維碼支持不同的編碼和糾錯級別。

覆蓋——二維碼內(nèi)置了對瑞士代碼和圖像覆蓋的支持。

配置選項——二維碼提供了對其行為和外觀的細粒度控制。

渲染模式——您還可以以畫布(位圖)或SVG(矢量圖形)格式顯示二維碼。

導(dǎo)出選項——二維碼使您能夠?qū)⑵鋬?nèi)容導(dǎo)出為圖像(PNG)， PDF和SVG格式。

驗證值——二維碼附帶了一個自定義驗證器，可用于檢查給定編碼是否允許值。