概述

---

立即下載Kendo UI for Angular

Kendo UI for Angular條形碼呈現(xiàn)了各種一維(1D)的行業(yè)條形碼。

下面的示例演示了運(yùn)行中的條形碼。

• app.component.ts：

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

@Component({
selector: 'my-app',
styles: [`
.k-card {
width: 30%;
}

.k-barcode {
width: 100%;
}
`],
template: `
<div class="k-card-deck">
<div class="k-card">
<img class="k-card-image" src="https://demos.telerik.com/kendo-ui/content/shared/images/foods/200/12.jpg"
alt="Queso Manchego La Pastora">
<div class="k-card-body">
<kendo-barcode type="EAN8" value="2346722">
</kendo-barcode>
</div>
</div>
<div class="k-card k-card-type-rich">
<img class="k-card-image" src="https://demos.telerik.com/kendo-ui/content/shared/images/foods/200/32.jpg"
alt="Mascarpone Fabioli">
<div class="k-card-body">
<kendo-barcode type="Code128" value="Mascarpone">
</kendo-barcode>
</div>
</div>
<div class="k-card k-card-type-rich">
<img class="k-card-image" src="https://demos.telerik.com/kendo-ui/content/shared/images/foods/200/72.jpg"
alt="Gudbrandsdalsost">
<div class="k-card-body">
<kendo-barcode type="Code39" value="BRUNOST">
</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);

主要特性

條形碼類型——您可以使用條形碼支持的一組廣泛的編碼模式(符號(hào))。

配置選項(xiàng)——條形碼提供了對(duì)其行為和外觀的細(xì)粒度控制。

呈現(xiàn)模式——您還可以用Canvas(位圖)或SVG(矢量圖形)格式顯示條形碼。

導(dǎo)出選項(xiàng)——條形碼允許您將其內(nèi)容導(dǎo)出為圖像(PNG)、PDF和SVG格式。

驗(yàn)證值——條形碼附帶一個(gè)自定義驗(yàn)證器，可用于檢查給定符號(hào)是否允許某個(gè)值。