概述

立即下载Kendo UI for Angular

Kendo UI for Angular ButtonGroup是两个或多个 Button 组件的容器。

ButtonGroup 中的每个 Button 都可以根据项目的要求并根据其API 参考进行单独配置。

以下为 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;
}

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

主要特征：

• 禁用 ButtonGroup   ———— 您可以使用 ButtonGroup 的配置选项来禁用整个按钮组或单个按钮，以便用户无法与其交互。
• 选择模式               -————  您可以仅将 ButtonGroup 中的某些按钮呈现为活动状态，以便限制用户与其余按钮的交互。
• 按钮集合               -————  您可以迭代配置选项的集合并呈现多个按钮组件。
• 外观                      ————   ButtonGroup 提供了即用型、预定义的样式选项集，用于修改整组按钮。
• 全球化                   ————  Angular Buttons 的所有 Kendo UI 都提供全球化选项。
• 可访问性                ————   ButtonGroup 可供屏幕阅读器访问并支持 WAI-ARIA 属性。
• 键盘导航                ————  ButtonGroup 支持多种键盘快捷键来处理各种命令。