配置

---

立即下載Kendo UI for Angular

Barcode提供了一組配置選項，使您能夠?qū)ζ湫袨檫M行微調(diào)。

條碼碼支持以下配置設置：

• 設置條形碼大小
• 設置顏色和背景色
• 設置邊框?qū)挾群皖伾?
• 配置文本標簽和校驗和

Size

要設置條形碼尺寸，請使用以下方法之一：

• 使用CSS規(guī)則設置條形碼或其容器的大小。
• 使用width和height屬性設置以像素為單位的尺寸。

如果條形碼寬度不足以滿足當前值和條形碼類型，則組件將拋出錯誤，始終使用您期望在實際使用中看到的值來測試應用程序。

查看源代碼：

• app.component.ts：

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

@Component({
selector: 'my-app',
styles: [`
.my-barcode {
width: 100%;
min-width: 100px;
aspect-ratio: 2/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">
Barcode (100% width)
</div>
</div>
<div class="k-card-body">

<kendo-barcode class="my-barcode" type="EAN13" value="123456789012">
</kendo-barcode>

</div>
</div>

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

<kendo-barcode type="EAN8" value="1234567"
[width]="200" [height]="100">
</kendo-barcode>

</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)邊距來進一步擴展背景。

確保所選的顏色組合可以提供足夠的對比度，并與你的目標讀者進行測試。

查看源代碼：

• app.component.ts：

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

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

條形碼可以顯示一個簡單的矩形作為其本身的一部分，您可以使用CSS創(chuàng)建更復雜的邊框。

查找源代碼：

• app.component.ts：

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

@Component({
selector: 'my-app',
template: `
<kendo-barcode type="EAN8" value="1234567"
[border]="barcodeBorder" [padding]="5"
[width]="200">
</kendo-barcode>
`
})
export class AppComponent {
barcodeBorder: 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);

文本和校驗

要配置條形碼文本標簽的外觀，請設置文本配置。

將checksum設置為true來顯示所選的校驗和值。

查看源代碼：

• app.component.ts：

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

@Component({
selector: 'my-app',
template: `
<kendo-barcode type="EAN8" value="1234567"
[text]="barcodeText" [checksum]="true"
[width]="200">
</kendo-barcode>
`
})
export class AppComponent {
barcodeText: BarcodeText = {
color: '#fc0',
font: '20px monospace'
};
}

• 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 cla

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