概述

立即下載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 支持多種鍵盤快捷鍵來處理各種命令。