按钮集合

立即下载Kendo UI for Angular

ButtonGroup使您能够通过迭代一组配置对象来呈现多个Button组件。

下面的示例演示如何呈现按钮集合。它利用每个按钮的selectedChange事件，该事件在按钮状态更改时执行自定义逻辑。

app.component.ts

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

import { clockIcon, checkCircleIcon, xCircleIcon, minusCircleIcon } from '@progress/kendo-svg-icons';

export interface IButton {
text: string;
icon: string;
color: string;
selected?: boolean;
}

@Component({
selector: 'my-app',
template: `
<div class="teamMate">
<img [src]="img" alt="Nancy Leverling" />
<span
class="k-icon k-i-circle status"
[ngStyle]="{ color: status }"
></span>
<span class="mate-info">
<h2>Nancy Leverling</h2>
<p>Team Lead</p>
</span>
</div>

<kendo-buttongroup width="100%" selection="single">
<button
*ngFor="let button of buttons"
[svgIcon]="button.svgIcon"
kendoButton
[toggleable]="true"
[selected]="button.selected"
(selectedChange)="selectedChange($event, button)"
>
<span>
<span class="k-icon {{ button.icon }}"></span>
{{ button.text }}
</span>
</button>
</kendo-buttongroup>
`,
encapsulation: ViewEncapsulation.None,
styles: [
`
.status {
margin-left: -22px;
padding-top: 1px;
font-size: 25px;
}
.teamMate h2 {
font-size: 1.3em;
font-weight: normal;
padding-top: 17px;
margin: 0;
}
.teamMate p {
margin: 0;
font-size: 0.8em;
}
.teamMate img {
display: inline-block;
vertical-align: top;
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 50%;
}
.mate-info {
display: inline-block;
vertical-align: top;
}
`
]
})
export class AppComponent {
public status = '#10b507';
public buttons = [
{ text: 'Away', svgIcon: clockIcon, color: '#f0c505' },
{ text: 'Available', svgIcon: checkCircleIcon, color: '#10b507', selected: true },
{ text: 'Offline', svgIcon: xCircleIcon, color: '#707070' },
{ text: 'Do not disturb', svgIcon: minusCircleIcon, color: '#e30000' }
];
public img = '//demos.telerik.com/kendo-ui/content/web/panelbar/nancy.jpg';

public selectedChange(e: boolean, btn: IButton): void {
this.status = btn.color;
}
}

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({
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})

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中实现按钮集合时，可以通过将选择存储在自定义集合中来跟踪所选按钮。

要启用此行为：

1. 设置“ButtonGroup”的选择模式为“multiple”。
2. 处理每个按钮的selectedChange事件以更新集合。

app.component.ts

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { NotificationService } from '@progress/kendo-angular-notification';

export interface IDay {
text: string;
index: number;
}

@Component({
selector: 'my-app',
template: `
<div class="example-config">Selected Days: {{ selectedDays | json }}</div>
<div class="row">
<div class="col-sm-12 col-md-4 example-col">
<p>Days</p>
<kendo-buttongroup selection="multiple">
<button
*ngFor="let button of buttons"
kendoButton
[toggleable]="true"
(selectedChange)="selectedChange($event, button)"
>
{{ button.text }}
</button>
</kendo-buttongroup>
</div>
</div>

<p>Notification container</p>
<div
class="append-container"
#container
style=" height: 150px; border: 1px solid black;"
></div>
`
})
export class AppComponent {
@ViewChild('container', { read: ViewContainerRef })
public container: ViewContainerRef;
public buttons = [
{ text: 'Monday', index: 0 },
{ text: 'Tuesday', index: 1 },
{ text: 'Wednesday', index: 2 },
{ text: 'Thursday', index: 3 },
{ text: 'Friday', index: 4 },
{ text: 'Saturday', index: 5 },
{ text: 'Sunday', index: 6 }
];

public selectedDays = [];

constructor(private notificationService: NotificationService) { }

public selectedChange(isTrue: boolean, day: IDay): void {
if (isTrue) {
this.selectedDays.push(day.index);
} else {
const index = this.selectedDays.indexOf(day.index);
this.selectedDays.splice(index, 1);
}
this.selectedDays.sort((a, b) => a - b);
this.show(isTrue, day);
}

public show(isChecked: boolean, day: IDay): void {
if (isChecked) {
this.showNotification(isChecked, day);
} else {
this.showNotification(isChecked, day);
}
}

// Show notification
public showNotification(checked: boolean, day: IDay): void {
this.notificationService.show({
content: `${day.text} was ${checked ? 'selected' : 'deselected'}`,
appendTo: this.container,
position: { horizontal: 'left', vertical: 'top' },
animation: { type: 'fade', duration: 300 },
type: { style: `${checked ? 'success' : 'info'}`, icon: true },
hideAfter: 5000
});
}
}

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 { NotificationModule } from '@progress/kendo-angular-notification';

import { AppComponent } from './app.component';

@NgModule({
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule, NotificationModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})

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