文檔半島外圍網(wǎng)上直營(yíng)>>telerik中文文檔>>條形碼類型
                條形碼類型
Kendo UI for Angular條碼支持多種一維(1D)工業(yè)條碼。
要配置條形碼符號(hào)(編碼方案),請(qǐng)?jiān)O(shè)置type屬性。
下表列出了每種條形碼的可用類型和支持的值,請(qǐng)注意校驗(yàn)和數(shù)字是自動(dòng)計(jì)算的,并且所有類型值也可以用小寫(xiě)字母拼寫(xiě)。
提示:如果值與所選類型的限制不匹配,Barcode將拋出錯(cuò)誤。始終使用您期望在實(shí)際使用中看到的值來(lái)測(cè)試應(yīng)用程序。
下面的例子演示了每種條形碼類型的作用:
查看源代碼:
- app.component.ts:
import { Component } from '@angular/core';
import { BarcodeType } from '@progress/kendo-angular-barcodes';
@Component({
selector: 'my-app',
styles: [`
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.k-card {
flex: 0 0 auto;
}
.k-barcode {
width: 300px;
height: 100px;
}
.k-card-title {
font-family: sans-serif;
}
`],
template: `
<div class="cards">
<div class="k-card k-text-center"
*ngFor="let item of allBarcodes">
<div class="k-card-header">
<div class="k-card-title">
{{ item.name }}
</div>
</div>
<div class="k-card-body">
<kendo-barcode [type]="item.type" [value]="item.value">
</kendo-barcode>
</div>
</div>
</div>
`
})
export class AppComponent {
public allBarcodes: {
type: BarcodeType;
name: string;
value: string;
}[] = [
{ type: 'EAN13', name: 'EAN-13', value: '123456789012' },
{ type: 'EAN8', name: 'EAN-8', value: '1234567' },
{ type: 'UPCA', name: 'UPC-A', value: '12345678901' },
{ type: 'UPCE', name: 'UPC-E', value: '123456' },
{ type: 'Code11', name: 'Code 11', value: '555-123' },
{ type: 'Code39', name: 'Code 39', value: 'CODE-39' },
{ type: 'Code39Extended', name: 'Code 39 (Extended)', value: '* Code-39 *' },
{ type: 'Code93', name: 'Code 93', value: 'CODE 93' },
{ type: 'Code93Extended', name: 'Code 93 (Extended)', value: '* Code 93 *' },
{ type: 'Code128', name: 'Code 128', value: '* Code 128 *' },
{ type: 'Code128A', name: 'Code 128A', value: '* CODE 128 *' },
{ type: 'Code128B', name: 'Code 128B', value: '* Code 128 *' },
{ type: 'Code128C', name: ' Code 128C', value: '112233' },
{ type: 'GS1-128', name: 'GS1-128', value: '00123456780000000001' },
{ type: 'MSImod10', name: 'MSI (Mod 10)', value: '1234567' },
{ type: 'MSImod11', name: ' MSI (Mod 11)', value: '1234567' },
{ type: 'MSImod1010', name: 'MSI (Mod 1010)', value: '1234567' },
{ type: 'MSImod1110', name: 'MSI (Mod 1110)', value: '1234567' },
{ type: 'POSTNET', name: 'POSTNET', value: '12345' }
];
}
- 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);                
            
 QQ交談
QQ交談 在線咨詢
在線咨詢 
                 
                
 渝公網(wǎng)安備
            50010702500608號(hào)
渝公網(wǎng)安備
            50010702500608號(hào)
             
            
 客服熱線
客服熱線