文檔半島外圍網(wǎng)上直營(yíng)>>telerik中文文檔>>鍵盤導(dǎo)航
                鍵盤導(dǎo)航
默認(rèn)情況下,ButtonGroup的鍵盤導(dǎo)航是可用的。
ButtonGroup支持以下鍵盤快捷鍵:
app.component.ts:
import { Component } from '@angular/core';
import { SVGIcon, boldIcon, italicIcon, underlineIcon } from '@progress/kendo-svg-icons';
@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-sm-12 col-md-4 example-col">
<p>Icons only</p>
<kendo-buttongroup>
<button kendoButton [toggleable]="true" [svgIcon]="boldSVG" title="Bold"></button>
<button kendoButton [toggleable]="true" [svgIcon]="italicSVG" title="Italic"></button>
<button kendoButton [toggleable]="true" [svgIcon]="underlineSVG" title="Underline"></button>
</kendo-buttongroup>
</div>
<div class="col-sm-12 col-md-4 example-col">
<p>Text only</p>
<kendo-buttongroup>
<button kendoButton [toggleable]="true">Bold</button>
<button kendoButton [toggleable]="true">Italic</button>
<button kendoButton [toggleable]="true">Underline</button>
</kendo-buttongroup>
</div>
<div class="col-sm-12 col-md-4 example-col">
<p>Icons + Text</p>
<kendo-buttongroup>
<button kendoButton [toggleable]="true" [svgIcon]="boldSVG">Bold</button>
<button kendoButton [toggleable]="true" [svgIcon]="italicSVG">Italic</button>
<button kendoButton [toggleable]="true" [svgIcon]="underlineSVG">Underline</button>
</kendo-buttongroup>
</div>
</div>
<div class="row">
<div class="col-sm-12 example-col">
<p>Buttons with responsive width</p>
<kendo-buttongroup width="100%">
<button kendoButton [toggleable]="true" [svgIcon]="boldSVG">Bold</button>
<button kendoButton [toggleable]="true" [svgIcon]="italicSVG">Italic</button>
<button kendoButton [toggleable]="true" [svgIcon]="underlineSVG">Underline</button>
</kendo-buttongroup>
</div>
</div>
`,
})
export class AppComponent {
public boldSVG: SVGIcon = boldIcon;
public italicSVG: SVGIcon = italicIcon;
public underlineSVG: SVGIcon = underlineIcon;
}
p.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';
@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
})
export class AppModule {}
main.ts:
import './polyfills';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });
禁用鍵盤導(dǎo)航
要禁用默認(rèn)鍵盤導(dǎo)航并在頁(yè)面的自然選項(xiàng)卡序列中包含所有按鈕,請(qǐng)將ButtonGroup navigable選項(xiàng)設(shè)置為false。
下面的例子演示了這種方法:
app.component.ts:
import { Component } from '@angular/core';
import { SVGIcon, boldIcon, italicIcon, underlineIcon } from '@progress/kendo-svg-icons';
@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-sm-12 col-md-4 example-col">
<p>Icons only</p>
<kendo-buttongroup [navigable]="false">
<button kendoButton [toggleable]="true" [svgIcon]="boldSVG"></button>
<button kendoButton [toggleable]="true" [svgIcon]="italicSVG"></button>
<button kendoButton [toggleable]="true" [svgIcon]="underlineSVG"></button>
</kendo-buttongroup>
</div>
<div class="col-sm-12 col-md-4 example-col">
<p>Text only</p>
<kendo-buttongroup [navigable]="false">
<button kendoButton [toggleable]="true">Bold</button>
<button kendoButton [toggleable]="true">Italic</button>
<button kendoButton [toggleable]="true">Underline</button>
</kendo-buttongroup>
</div>
<div class="col-sm-12 col-md-4 example-col">
<p>Icons + Text</p>
<kendo-buttongroup [navigable]="false">
<button kendoButton [toggleable]="true" [svgIcon]="boldSVG">Bold</button>
<button kendoButton [toggleable]="true" [svgIcon]="italicSVG">Italic</button>
<button kendoButton [toggleable]="true" [svgIcon]="underlineSVG">Underline</button>
</kendo-buttongroup>
</div>
</div>
<div class="row">
<div class="col-sm-12 example-col">
<p>Buttons with responsive width</p>
<kendo-buttongroup width="100%" [navigable]="false">
<button kendoButton [toggleable]="true" [svgIcon]="boldSVG">Bold</button>
<button kendoButton [toggleable]="true" [svgIcon]="italicSVG">Italic</button>
<button kendoButton [toggleable]="true" [svgIcon]="underlineSVG">Underline</button>
</kendo-buttongroup>
</div>
</div>
`,
})
export class AppComponent {
public boldSVG: SVGIcon = boldIcon;
public italicSVG: SVGIcon = italicIcon;
public underlineSVG: SVGIcon = underlineIcon;
}
p.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';
@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
})
export class AppModule {}
main.ts:
import './polyfills';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });                
            
 QQ交談
QQ交談 在線咨詢
在線咨詢 
                 
                
 渝公網(wǎng)安備
            50010702500608號(hào)
渝公網(wǎng)安備
            50010702500608號(hào)
             
            
 客服熱線
客服熱線