配置
Barcode提供了一組配置選項(xiàng),使您能夠?qū)ζ湫袨檫M(jìn)行微調(diào)。
條碼碼支持以下配置設(shè)置:
- 設(shè)置條形碼大小
- 設(shè)置顏色和背景色
- 設(shè)置邊框?qū)挾群皖伾?
- 配置文本標(biāo)簽和校驗(yàn)和
Size
要設(shè)置條形碼尺寸,請(qǐng)使用以下方法之一:
- 使用CSS規(guī)則設(shè)置條形碼或其容器的大小。
- 使用width和height屬性設(shè)置以像素為單位的尺寸。
如果條形碼寬度不足以滿(mǎn)足當(dāng)前值和條形碼類(lèi)型,則組件將拋出錯(cuò)誤,始終使用您期望在實(shí)際使用中看到的值來(lái)測(cè)試應(yīng)用程序。
查看源代碼:
- 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);
顏色和背景
若要自定義條形碼的前景和背景顏色,請(qǐng)?jiān)O(shè)置和選項(xiàng),你可以通過(guò)指定一個(gè)可選的內(nèi)邊距來(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-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
條形碼可以顯示一個(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-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);
文本和校驗(yàn)
要配置條形碼文本標(biāo)簽的外觀(guān),請(qǐng)?jiān)O(shè)置文本配置。
將checksum設(shè)置為true來(lái)顯示所選的校驗(yàn)和值。
	
查看源代碼:
- 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);                
            
 QQ交談
QQ交談 在線(xiàn)咨詢(xún)
在線(xiàn)咨詢(xún) 
                 
                
 渝公網(wǎng)安備
            50010702500608號(hào)
渝公網(wǎng)安備
            50010702500608號(hào)
             
            
 客服熱線(xiàn)
客服熱線(xiàn)