概述

立即下载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组，它可以与您一起创建您可能需要的任何定制解决方案。

彩票走势图

概述