键盘导航

---

立即下载Kendo UI for Angular

默认情况下，ButtonGroup的键盘导航是可用的。

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

禁用键盘导航

要禁用默认键盘导航并在页面的自然选项卡序列中包含所有按钮，请将ButtonGroup navigable选项设置为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 });