概述

---

立即下載Kendo UI for Angular

Kendo UI for Angular按鈕提供了一個可點擊的UI功能，可以設(shè)置為顯示任意內(nèi)容。

它們包括各種按鈕類型和樣式，具有廣泛的配置選項，這種靈活性允許您快速、輕松地創(chuàng)建所需的精確按鈕，以滿足您對功能和外觀的特定需求。

這些按鈕都是專門為Angular構(gòu)建的，此時可以得到高性能的按鈕控件，它們可以與您的應(yīng)用程序以及其他Kendo UI for Angular組件緊密集成。

• Button：用于按鈕元素的Angular指令。
• ButtonGroup：具有相同功能的分組按鈕。
• Chip：用于輸入和過濾內(nèi)容或觸發(fā)操作的組件。
• ChipList：用于維護所選芯片組的組件。
• DropDownButton：用于執(zhí)行附加操作項的組件。
• FloatingActionButton：用于執(zhí)行主要或最常見操作的組件。
• SplitButton：用于執(zhí)行默認或預(yù)定義操作的組件。

Angular按鈕示例

例如：

查看源代碼：

app.component.ts：

import { Component } from '@angular/core';
import {
SVGIcon,
gearIcon,
clipboardIcon,
plusIcon,
shareIcon,
googleIcon,
redditIcon,
dribbbleIcon,
clipboardTextIcon,
clipboardMarkdownIcon,
clipboardCodeIcon,
clockIcon,
lockIcon,
} from '@progress/kendo-svg-icons';

@Component({
selector: 'my-app',
template: `
<div class="example-wrapper">
<div class="example-col">
<p>Button</p>
<button kendoButton (click)="onButtonClick()">Default</button>
<button kendoButton (click)="onButtonClick()" themeColor="primary">Primary</button>
<button kendoButton (click)="onButtonClick()" [disabled]="true">Disabled</button>
</div>
<div class="example-col">
<p>ButtonGroup</p>
<kendo-buttongroup>
<button kendoButton [toggleable]="true">Option A</button>
<button kendoButton [toggleable]="true">Option B</button>
<button kendoButton [toggleable]="true">Option C</button>
</kendo-buttongroup>
</div>
<div class="example-col">
<p>DropDownButton</p>
<kendo-dropdownbutton
[data]="dropDownButtonItems"
[svgIcon]="gearSVG"
title="User Settings"
(itemClick)="onSplitButtonItemClick($event)"
>
User Settings
</kendo-dropdownbutton>
</div>
<div class="example-col">
<p>SplitButton</p>
<kendo-splitbutton
[data]="splitButtonItems"
[svgIcon]="clipboardSVG"
title="Paste"
(itemClick)="onSplitButtonItemClick($event)"
(buttonClick)="onSplitButtonClick()"
>
Paste
</kendo-splitbutton>
</div>
<div class="example-col">
<p>Chip</p>
<kendo-chip-list selection="multiple">
<kendo-chip *ngFor="let chip of chips" [label]="chip.label" [svgIcon]="chip.svgIcon"></kendo-chip>
</kendo-chip-list>
</div>
<div class="example-col">
<kendo-floatingactionbutton
[svgIcon]="plusSVG"
text="Add New"
title="Add New"
[align]="{ horizontal: 'start', vertical: 'bottom' }"
(click)="onFabClick()"
>
</kendo-floatingactionbutton>
</div>
<div class="example-col">
<kendo-floatingactionbutton [svgIcon]="shareSVG" [dialItems]="fabItems"> </kendo-floatingactionbutton>
</div>
</div>
`,
})
export class AppComponent {
public imageUrl = 'https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png';
public gearSVG: SVGIcon = gearIcon;
public clipboardSVG: SVGIcon = clipboardIcon;
public plusSVG: SVGIcon = plusIcon;
public shareSVG: SVGIcon = shareIcon;

public fabItems = [
{ svgIcon: googleIcon, label: 'Google' },
{ svgIcon: redditIcon, label: 'Reddit' },
{ svgIcon: dribbbleIcon, label: 'Dribbble' },
];

public splitButtonItems = [
{
text: 'Keep Text Only',
svgIcon: clipboardTextIcon,
click: (): void => {
console.log('Keep Text Only click handler');
},
},
{
text: 'Paste as HTML',
svgIcon: clipboardCodeIcon,
},
{
text: 'Paste Markdown',
svgIcon: clipboardMarkdownIcon,
},
{
text: 'Set Default Paste',
},
];

public dropDownButtonItems = [
{ text: 'My Profile' },
{ text: 'Friend Requests' },
{ text: 'Account Settings' },
{ text: 'Support' },
{ text: 'Log Out' },
];

public chips = [
{
label: 'Alarm',
svgIcon: clockIcon,
},
{
label: 'Lock',
svgIcon: lockIcon,
},
];

public onFabClick(): void {
console.log('Added');
}

public onSplitButtonClick(): void {
console.log('Paste');
}

public onSplitButtonItemClick(dataItem: { [key: string]: unknown }): void {
if (dataItem) {
console.log(dataItem.text);
}
}

public onButtonClick(): void {
console.log('click');
}
}

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

Angular Buttons主要功能

每個組件都提供了一系列方便的、對開發(fā)者友好的功能，它們的數(shù)量和進一步的開發(fā)不受本節(jié)列表的限制。Kendo UI for Angular團隊不斷投入精力來提高性能，為現(xiàn)有的按鈕庫增加更多的價值，并為其開發(fā)新的特性和控件。

禁用按鈕

您可以選擇設(shè)置按鈕為禁用狀態(tài)，這樣，如果需要用戶將無法與它們交互。

圖標(biāo)按鈕

所有Buttons組件都提供了配置選項，可以輕松呈現(xiàn)圖標(biāo)、圖標(biāo)加文本或純文本按鈕。更重要的是，您不僅可以使用豐富的內(nèi)置Kendo UI圖標(biāo)集合中的任何圖標(biāo)，而且還可以使用FontAwesome或image圖標(biāo)。

角形按鈕外觀

按鈕的顏色和樣式通常由當(dāng)前的Kendo UI主題決定，但按鈕的每個方面都可以通過主題變量或配置選項進行自定義。Kendo UI for Angular提供了一系列流行的主題，包括Bootstrap和Material，所有這些都可以通過Progress ThemeBuilder在線工具輕松定制。

全球化

Angular的Kendo UI for Angular按鈕支持全球化，以確保每個按鈕組件都能很好地適應(yīng)任何應(yīng)用程序，而不管需要支持什么語言和語言環(huán)境，此外，Buttons支持從右到左(RTL)方向的呈現(xiàn)。

Kendo UI for Angular的試用版

Kendo UI for Angular按鈕是Kendo UI for Angular庫的一部分。Kendo UI for Angular提供了一個30天的試用期，可以使用該庫的全功能版本并且沒有任何限制。此外，在試用期內(nèi)，如果您有任何問題，您有資格獲得全面的技術(shù)支持。

立即下載Kendo UI for Angular

支持選項

對于任何使用KendoUIforAngular按鈕或其他組件的問題，以下有幾個可用的支持選項：

Kendo UI許可證持有者和任何正在積極試用的人都可以利用由構(gòu)建庫的實際開發(fā)人員提供的出色的Kendo UI for Angular客戶支持，要提交支持票，請使用?Kendo UI支持系統(tǒng)。

• Kendo UI for Angular論壇是免費支持的一部分，你可以從社區(qū)和Kendo UI團隊那里獲得各種通用問題的免費支持。
• Kendo UI for Angular反饋門戶和Kendo UI for Angular路線圖提供了討論中的功能以及計劃發(fā)布的功能的信息。
• Kendo UI for Angular使用GitHub Issues作為bug跟蹤器，你可以在那里提交任何相關(guān)的報告。
• 當(dāng)然，Kendo UI for Angular團隊在StackOverflow上也很活躍，你可以在那里找到大量的問題和答案。
• 需要為您的項目量身定制一些獨特的東西?Progress提供了它的Progress Services組，它可以與您一起創(chuàng)建您可能需要的任何定制解決方案。