概述

立即下載Kendo UI for Angular

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

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

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

• ：用于按鈕元素的Angular指令。
• ：具有相同功能的分組按鈕。
• ：用于輸入和過濾內容或觸發操作的組件。
• ：用于維護所選芯片組的組件。
• ：用于執行附加操作項的組件。
• ：用于執行主要或最常見操作的組件。
• ：用于執行默認或預定義操作的組件。

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 = '//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主要功能

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

禁用按鈕

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

圖標按鈕

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

角形按鈕外觀

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

全球化

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

Kendo UI for Angular的試用版

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

立即下載Kendo UI for Angular

支持選項

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

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

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