配置

---

立即下載Kendo UI for Angular

二維碼提供了一組配置選項(xiàng)，可以微調(diào)它的行為。

二維碼支持以下配置設(shè)置：

• 設(shè)置QR碼大小
• 設(shè)置顏色和背景色
• 設(shè)置邊框?qū)挾群皖伾?

Size

要設(shè)置二維碼尺寸，請(qǐng)使用以下兩種方法之一：

• 使用CSS規(guī)則設(shè)置二維碼或其容器的大小。
• 使用屬性(它定義寬度和高度)來(lái)設(shè)置任何CSS單元的尺寸。

如果QR碼大小不足以滿足當(dāng)前值和錯(cuò)誤糾正級(jí)別，則組件將拋出錯(cuò)誤，始終使用您期望在實(shí)際中看到的值來(lái)測(cè)試應(yīng)用程序。

例如：

查看源代碼：

app.component.ts：

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

@Component({
selector: 'my-app',
styles: [`
.my-qrcode {
width: 50%;
min-width: 100px;
aspect-ratio: 1/1;
}

.k-card {
width: 50%;
}
`],
template: `
<div class="k-card-deck">
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
QR Code (50% width)
</div>
</div>
<div class="k-card-body">

<kendo-qrcode class="my-qrcode" value="123456789012">
</kendo-qrcode>

</div>
</div>

<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
QR Code (fixed size)
</div>
</div>
<div class="k-card-body">

<kendo-qrcode value="1234567" [size]="200">
</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);

顏色和背景

若要自定義二維碼前景色和背景色，請(qǐng)?jiān)O(shè)置顏色和背景選項(xiàng)，您可以通過(guò)指定可選的填充來(lái)進(jìn)一步擴(kuò)展背景。

提示：確保所選的顏色組合提供足夠的對(duì)比度，并與您的目標(biāo)讀者進(jìn)行測(cè)試。

例如：

查看源代碼：

app.component.ts：

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

@Component({
selector: 'my-app',
template: `
<kendo-qrcode value="1234567"
color="#00f" background="#fc0"
[padding]="15">
</kendo-qrcode>
`
})
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);

Border

二維碼可以顯示一個(gè)簡(jiǎn)單的矩形邊框作為自身的一部分，您可以使用CSS創(chuàng)建更復(fù)雜的邊框。

查看源代碼：

app.component.ts：

import { Component } from '@angular/core';
import { Border } from '@progress/kendo-angular-barcodes';

@Component({
selector: 'my-app',
template: `
<kendo-qrcode value="1234567"
[border]="qrcodeBorder" [padding]="5">
</kendo-qrcode>
`
})
export class AppComponent {
qrcodeBorder: Border = {
color: '#fc0',
width: 2
};
}

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);