彩票走势图

logo telerik中文文档

外观

立即下载Kendo UI for Angular

按钮提供了预定义的外观选项，如不同的大小，边界半径，填充模式和主题颜色。

下面的示例演示了按钮的所有可用外观选项。

示例

查看源代码：

app.component.ts： 

import { Component } from '@angular/core';
import {
ButtonSize,
ButtonRounded,
ButtonFillMode,
ButtonThemeColor
} from '@progress/kendo-angular-buttons';
import { IOption } from './models';

export type Option = {
type: string,
data: string[],
default: ButtonSize | ButtonRounded | ButtonFillMode | ButtonThemeColor
};

@Component({
selector: 'my-app',
template: `
<app-configurator
[options]="options"
(optionChange)="changeHandler($event)">
</app-configurator>

<div class="example-config">
<button kendoButton
[size]="size"
[rounded]="rounded"
[fillMode]="fillMode"
[themeColor]="themeColor">
User Settings
</button>
</div>
`,
styles: [`
.example-config {
display: flex;
justify-content: space-around;
}
`]
})
export class AppComponent {
public size: ButtonSize = 'medium';
public rounded: ButtonRounded = 'medium';
public fillMode: ButtonFillMode = 'solid';
public themeColor: ButtonThemeColor = 'base';

public options: Option[] = [{
type: 'size',
data: ['small', 'medium', 'large'],
default: this.size
}, {
type: 'rounded',
data: ['small', 'medium', 'large', 'full'],
default: this.rounded
}, {
type: 'fillMode',
data: ['solid', 'flat', 'outline', 'clear', 'link'],
default: this.fillMode
}, {
type: 'themeColor',
data: ['base', 'primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse'],
default: this.themeColor
}];

public changeHandler({optionType, optionValue}: IOption): void {
this[optionType] = optionValue;
}
}

app.module.ts： 

import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { LabelModule } from '@progress/kendo-angular-label';
import { AppComponent } from './app.component';
import { ConfiguratorComponent } from './configurator.component';

@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent, ConfiguratorComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
ButtonsModule,
LabelModule,
DropDownsModule
]
})
export class AppModule { }

configurator.component.ts： 

import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { Option } from './app.component';
import { IOption } from './models';

@Component({
selector: 'app-configurator',
template: `
<div class="configurator">
<kendo-label *ngFor="let option of options" [text]="option.type | uppercase">
<kendo-dropdownlist
[style.width.px]="125"
[data]="option.data"
[value]="option.default"
(selectionChange)="onItemClick($event, option.type)">
</kendo-dropdownlist>
</kendo-label>
</div>
`,
encapsulation: ViewEncapsulation.None,
styles: [`
.configurator {
display: flex;
justify-content: space-around;
background-color: rgba(0, 0, 0, .03);
border: 1px solid rgba(0, 0, 0, .08);
margin: 0 0 20px;
padding: 20px;
}

.configurator kendo-label {
text-align: center;
display: inline-grid;
}

.configurator .k-label {
color: #a1a1a1;
}
`]
})
export class ConfiguratorComponent {
@Input() options: Option[];
@Output() optionChange: EventEmitter<IOption> = new EventEmitter();

public onItemClick(value: string, type: string): void {
this.optionChange.emit({optionType: type, optionValue: value});
}
}

models.ts： 

export interface IOption {
optionType: string;
optionValue: string;
}
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 });

型号

这个按钮允许您配置它的padding宽度，为了达到这个目的，可以使用size属性，它接受ButtonSize类型的值或none。

size选项支持以下值：

  • small——设置 padding为2px和8px
  • medium(默认)-设置 padding为4px和8px
  • large——设置 padding为6px和8px
  • none——none选项删除内置大小，允许自定义 padding

下面的示例演示如何定义Button的大小。

示例

查看源代码：

app.component.ts： 

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

@Component({
selector: 'my-app',
template: `
<div class="example">
<button kendoButton size="small">Small</button>
<button kendoButton size="medium">Medium</button>
<button kendoButton size="large">Large</button>
<button kendoButton size="none" class="custom-size">Custom</button>
</div>
`,
styles: [`
.example {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
}

.custom-size {
padding: 10px 20px;
}
`]
})
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 });

圆度

该按钮允许您通过round属性将不同的 border radius应用到组件上，它接受ButtonRounded或none类型的值。

四舍五入选项支持以下值：

  • small——设置 border radius 为1px
  • medium——(默认)-设置 border radius 为2px。
  • large——设置 border radius 为4px
  • full ——设置 border radius 为9999px
  • none——none选项移除内置的圆度，允许自定义 border radius 

下面的示例演示如何定义按钮的边框半径。

例子

查看源代码：

app.component.ts： 

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

@Component({
selector: 'my-app',
template: `
<div class="example">
<button kendoButton rounded="none">No Roundness</button>
<button kendoButton rounded="small">Small</button>
<button kendoButton rounded="medium">Medium</button>
<button kendoButton rounded="large">Large</button>
<button kendoButton rounded="full">Full</button>
<button kendoButton rounded="none" class="custom-rounded">Custom</button>
</div>
`,
styles: [`
.example {
display: flex;
justify-content: space-evenly;
}

.custom-rounded {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
`]
})
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 });

填充模式

该按钮允许您使用fillMode属性设置不同的填充模式，它接受ButtonFillMode或none类型的值。

fillMode选项支持以下值：

  • olid(默认)——设置background color和solid borders
  • flat ——将transparent background and borders设置为默认状态，将solid borders设置为聚焦状态
  • outline——设置transparent background 和solid borders
  • clear——设置transparent background and borders 在默认状态和background color集中的状态
  • link——设置transparent background and borders
  • none—— none选项移除内置的填充模式样式，允许自定义background和border样式

下面的例子演示了如何定义按钮的填充模式。

示例

查看源代码：

app.component.ts： 

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

@Component({
selector: 'my-app',
template: `
<div class="example-config">
<button kendoButton fillMode="solid">Solid</button>
<button kendoButton fillMode="flat">Flat</button>
<button kendoButton fillMode="outline">Outline</button>
<button kendoButton fillMode="clear">Clear</button>
<button kendoButton fillMode="link">Link</button>
</div>
`,
styles: [`
.example-config {
display: flex;
justify-content: space-around;
}
`]
})
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 });

主题颜色

按钮允许您使用属性设置不同的主题颜色，它接受ButtonThemeColor或none类型的值。

themeColor选项支持以下值：

  • base(默认)——基于base主题颜色的应用着色。
  • primary ——基于 primary主题颜色的应用着色。
  • secondary ——基于secondary主题颜色的应用着色。
  • tertiary——基于tertiary主题颜色的应用着色。
  • info ——基于info主题颜色的应用着色。
  • success ——基于 success主题颜色的应用着色。
  • warning ——基于 warning主题颜色的应用着色。
  • error ——基于error主题颜色的应用着色。
  • dark——基于 dark主题颜色的应用着色。
  • light ——基于 light主题色的应用着色。
  • 逆——基于 inverse主题颜色的应用着色。
  • none ——none选项删除内置的主题颜色，允许自定义颜色。

下面的示例演示如何定义按钮的主题颜色。

示例

查看源代码：

app.component.ts： 

import { Component } from '@angular/core';
import { ButtonThemeColor } from '@progress/kendo-angular-buttons';

@Component({
selector: 'my-app',
template: `
<div class="example">
<button kendoButton
*ngFor="let color of themeColors; index as i"
[themeColor]="color">
{{color | titlecase }}
</button>
</div>
`,
styles: [`
.example {
display: flex;
justify-content: space-evenly;
}
`]
})
export class AppComponent {
public themeColors: ButtonThemeColor[] = [
'base', 'primary', 'secondary', 'tertiary',
'info', 'success', 'warning', 'error',
'dark', 'light', 'inverse'
];
}
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 });
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP