圖標(biāo)Button

---

立即下載Kendo UI for Angular

您可以通過(guò)向組件顯示圖像、預(yù)定義或自定義圖標(biāo)和SVG圖標(biāo)來(lái)增強(qiáng)Button的文本內(nèi)容。

從web標(biāo)準(zhǔn)的角度來(lái)看，最好使用背景圖像，因?yàn)閳D標(biāo)是用來(lái)裝飾的，而不是用來(lái)表示結(jié)構(gòu)內(nèi)容的。

按鈕提供了以下選項(xiàng)來(lái)設(shè)置組件內(nèi)的圖像或圖標(biāo)：

——在按鈕內(nèi)設(shè)置一個(gè)圖標(biāo)。要獲得可用圖標(biāo)的完整列表，請(qǐng)轉(zhuǎn)到Kendo UI For Angular支持的字體圖標(biāo)列表。

 —在按鈕內(nèi)設(shè)置SVG圖標(biāo)。要獲得可用圖標(biāo)的完整列表，請(qǐng)轉(zhuǎn)到Kendo UI For Angular支持的SVG圖標(biāo)列表。

 ——顯示CSS類(lèi)中的圖標(biāo)。使用iconClass適合渲染FontAwesome或其他第三方字體圖標(biāo)。

——通過(guò) URL 鏈接設(shè)置圖像圖標(biāo)。

 從R2 2023 (v13.0.0)開(kāi)始，Kendo UI for Angular組件和Kendo UI主題中的默認(rèn)圖標(biāo)類(lèi)型從 font更改為svg。設(shè)置svgIcon屬性，或者繼續(xù)。

SVG圖標(biāo)按鈕

要在按鈕內(nèi)部顯示SVG圖標(biāo)，請(qǐng)將按鈕的svgIcon屬性設(shè)置為所需的svgIcon。

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

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

public svgCart: SVGIcon = cartIcon;

下面的示例演示如何在Button中設(shè)置SVG圖標(biāo)：

查看源代碼：

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

字體圖標(biāo)按鈕

要在按鈕內(nèi)部顯示一個(gè)字體圖標(biāo)：

1.使用Icons包的令牌并將圖標(biāo)類(lèi)型設(shè)置為font。

2.根據(jù)字體圖標(biāo)庫(kù)，您可以設(shè)置：

• icon屬性設(shè)置為KendoUI主題中的字體圖標(biāo)。要了解詳細(xì)信息，請(qǐng)查看Kendo UI for Angular支持的字體圖標(biāo)列表。

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

• iconClass屬性設(shè)置為第三方字體圖標(biāo)庫(kù)(如FontAwesome)。

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

下面的示例演示如何設(shè)置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"

/>
<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中顯示來(lái)自URL鏈接的圖像，請(qǐng)?jiān)O(shè)置組件的imageUrl屬性。

 <kendo-button imageUrl="http://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="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"
>Snowboarding</kendo-button
>
<kendo-button
imageUrl="http://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="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png"
>Golf</kendo-button
>
<kendo-button
imageUrl="http://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="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png"
>Swimming</kendo-button
>
<kendo-button
imageUrl="http://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 });