选择模式

立即下载Kendo UI for Angular

您可以限制在ButtonGroup中可以选择的按钮的数量。

默认情况下，ButtonGroup的选择模式为“multiple”。

有关在集合中持久化所选按钮的更多信息，请参阅关于ButtonGruop的文章。

下面的示例演示如何配置ButtonGroup的选择模式。

app.component.ts

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

import { SVGIcon, boldIcon, italicIcon, underlineIcon, alignLeftIcon, alignCenterIcon, alignRightIcon, alignJustifyIcon } from '@progress/kendo-svg-icons';

@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-xs-12 col-sm-6 example-col">
<p>Single selection mode</p>
<kendo-buttongroup selection="single">
<button kendoButton [toggleable]="true" [svgIcon]="alignLeftSVG" title="Align-left"></button>
<button kendoButton [toggleable]="true" [svgIcon]="alignCenterSVG" title="Align-center"></button>
<button kendoButton [toggleable]="true" [svgIcon]="alignRightSVG" title="Align-right"></button>
<button kendoButton [toggleable]="true" [svgIcon]="alignJustifySVG" title="Align-justify"></button>
</kendo-buttongroup>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<p>Multiple selection mode</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>
`
})

export class AppComponent {
public boldSVG: SVGIcon = boldIcon;
public italicSVG: SVGIcon = italicIcon;
public underlineSVG: SVGIcon = underlineIcon;

public alignLeftSVG: SVGIcon = alignLeftIcon;
public alignCenterSVG: SVGIcon = alignCenterIcon;
public alignRightSVG: SVGIcon = alignRightIcon;
public alignJustifySVG: SVGIcon = alignJustifyIcon;
}

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