文档彩票走势图>>telerik中文文档>>图标Button

图标Button

立即下载Kendo UI for Angular

您可以通过向组件显示图像、预定义或自定义图标和SVG图标来增强Button的文本内容。

从web标准的角度来看，最好使用背景图像，因为图标是用来装饰的，而不是用来表示结构内容的。

按钮提供了以下选项来设置组件内的图像或图标：

——在按钮内设置一个图标。要获得可用图标的完整列表，请转到Kendo UI For Angular支持的字体图标列表。

—在按钮内设置SVG图标。要获得可用图标的完整列表，请转到Kendo UI For Angular支持的SVG图标列表。

——显示CSS类中的图标。使用iconClass适合渲染FontAwesome或其他第三方字体图标。

——通过 URL 链接设置图像图标。

从R2 2023 (v13.0.0)开始，Kendo UI for Angular组件和Kendo UI主题中的默认图标类型从 font更改为svg。设置svgIcon属性，或者继续。

SVG图标按钮

要在按钮内部显示SVG图标，请将按钮的svgIcon属性设置为所需的svgIcon。

<kendo-button [svgIcon]="svgCart">Cart</kendo-button>

import { cartIcon, SVGIcon } from '@progress/kendo-svg-icons';

public svgCart: SVGIcon = cartIcon;

下面的示例演示如何在Button中设置SVG图标：

查看源代码：

app.component.ts：

import { Component } from '@angular/core';
import { SVGIcon, cartIcon, anchorIcon, codeIcon } from '@progress/kendo-svg-icons';

@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<kendo-button [svgIcon]="svgCart">Buy</kendo-button>
<kendo-button [svgIcon]="svgCart" title="Cart"></kendo-button>
</div>

<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<kendo-button [svgIcon]="svgCode">Insert Code</kendo-button>
<kendo-button [svgIcon]="svgCode" title="Insert Code"></kendo-button>
</div>

<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<kendo-button [svgIcon]="svgAnchor">Ferry Port</kendo-button>
<kendo-button [svgIcon]="svgAnchor" title="Ferry Port"></kendo-button>
</div>
</div>
`,
styles: [
`
kendo-button {
margin: 0 3px;
}
`,
],
})
export class AppComponent {
public svgCart: SVGIcon = cartIcon;
public svgAnchor: SVGIcon = anchorIcon;
public svgCode: SVGIcon = codeIcon;
}

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

字体图标按钮

要在按钮内部显示一个字体图标：

1.使用Icons包的令牌并将图标类型设置为font。

2.根据字体图标库，您可以设置：

icon属性设置为KendoUI主题中的字体图标。要了解详细信息，请查看Kendo UI for Angular支持的字体图标列表。

<kendo-button icon="calendar">Events</kendo-button>

iconClass属性设置为第三方字体图标库(如FontAwesome)。

<kendo-button iconClass="fa fa-taxi">Take a Taxi</kendo-button>

下面的示例演示如何设置Button的icon和iconClass属性：

查看源代码：

app.component.ts：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3 example-col">
<p>Kendo Font Icon</p>
<kendo-button icon="calendar">Events</kendo-button>
<kendo-button icon="calendar" title="Events"></kendo-button>
</div>

<div class="col-xs-12 col-sm-6 col-lg-3 example-col">
<p>FontAwesome Library</p>
<link
rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
/>
<kendo-button iconClass="fa fa-taxi">Take a Taxi</kendo-button>
<kendo-button iconClass="fa fa-taxi" title="Take a Taxi"></kendo-button>
</div>
</div>
`,
styles: [
`
kendo-button {
margin: 0 3px;
}
`,
],
})
export class AppComponent {}

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 { ICON_SETTINGS } from '@progress/kendo-angular-icons';

import { AppComponent } from './app.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font' } }],
})
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 });

使用图像URL

要想在Button中显示来自URL链接的图像，请设置组件的imageUrl属性。

<kendo-button imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png" >Take a Taxi</kendo-button>

下面的例子演示了按钮的imageUrl属性：

查看源代码：

app.component.ts：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<kendo-button imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"
>Snowboarding</kendo-button
>
<kendo-button
imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"
title="Snowboarding"
></kendo-button>
</div>

<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<kendo-button imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png"
>Golf</kendo-button
>
<kendo-button
imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png"
title="Golf"
></kendo-button>
</div>

<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<kendo-button imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png"
>Swimming</kendo-button
>
<kendo-button
imageUrl="//demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png"
title="Swimming"
></kendo-button>
</div>
</div>
`,
styles: [
`
kendo-button {
margin: 0 3px;
}
`,
],
})
export class AppComponent {}

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

彩票走势图

图标Button

SVG图标按钮

字体图标按钮

使用图像URL

用科技创就卓越

Create excellence with technology