<div class="content__title">
|
<h1>Button</h1>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Type">
|
<button nz-button [nzType]="'primary'" [disabled]="disabled" class="mr-sm">
|
<span>Primary</span>
|
</button>
|
<button nz-button [nzType]="'default'" [disabled]="disabled" class="mr-sm">
|
<span>Default</span>
|
</button>
|
<button nz-button [nzType]="'dashed'" [disabled]="disabled" class="mr-sm">
|
<span>Dashed</span>
|
</button>
|
<button nz-button [nzType]="'danger'" [disabled]="disabled" class="mr-sm">
|
<span>Danger</span>
|
</button>
|
<button nz-button [nzType]="'dashed'" (click)="toggleDisabled()" class="mr-sm">
|
<span>Toggle disabled</span>
|
</button>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Icon">
|
<button nz-button [nzType]="'primary'" [nzShape]="'circle'" [disabled]="disabled" class="mr-sm">
|
<i class="anticon anticon-search"></i>
|
</button>
|
<button nz-button [nzType]="'primary'" [disabled]="disabled" class="mr-sm">
|
<i class="anticon anticon-search"></i><span>Search</span>
|
</button>
|
<button nz-button [nzType]="'dashed'" [nzShape]="'circle'" [disabled]="disabled" class="mr-sm">
|
<i class="anticon anticon-search"></i>
|
</button>
|
<button nz-button [nzType]="'default'" [disabled]="disabled" class="mr-sm">
|
<i class="anticon anticon-search"></i><span>Search</span>
|
</button>
|
</nz-card>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Size">
|
<nz-radio-group [(ngModel)]="size" class="mb-md">
|
<label nz-radio-button [nzValue]="'large'"><span>Large</span></label>
|
<label nz-radio-button [nzValue]="'default'"><span>Default</span></label>
|
<label nz-radio-button [nzValue]="'small'"><span>Small</span></label>
|
</nz-radio-group>
|
<div class="mb-md">
|
<button nz-button [nzType]="'primary'" [nzSize]="size" [nzShape]="'circle'" class="mr-sm">
|
<i class="anticon anticon-download"></i>
|
</button>
|
<button nz-button [nzType]="'primary'" [nzSize]="size" class="mr-sm">
|
<i class="anticon anticon-download"></i><span>Download</span>
|
</button>
|
<button nz-button [nzType]="'primary'" [nzSize]="size">
|
<span>Normal</span>
|
</button>
|
</div>
|
<nz-button-group [nzSize]="size">
|
<button nz-button [nzType]="'primary'" class="mr-sm">
|
<i class="anticon anticon-left"></i><span>Backward</span>
|
</button>
|
<button nz-button [nzType]="'primary'">
|
<span>Forward</span><i class="anticon anticon-right"></i>
|
</button>
|
</nz-button-group>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Loading">
|
<div class="mb-md">
|
<button nz-button [nzType]="'primary'" [nzLoading]="loading" class="mr-sm">
|
<span><i class="anticon anticon-poweroff"></i> Loading</span>
|
</button>
|
<button nz-button [nzType]="'primary'" [nzSize]="'small'" [nzLoading]="loading" class="mr-sm">
|
<span>Loading</span>
|
</button>
|
<button nz-button [nzType]="'dashed'" (click)="toggleLoading()">
|
<span>Toggle Loading</span>
|
</button>
|
</div>
|
<div class="mb-md">
|
<button nz-button [nzType]="'primary'" [nzLoading]="loading" class="mr-sm">
|
<span>Click me!</span>
|
</button>
|
<button nz-button [nzType]="'primary'" [nzLoading]="loading">
|
<i class="anticon anticon-poweroff"></i>
|
<span>Click me!</span>
|
</button>
|
</div>
|
<button nz-button [nzLoading]="true" [nzShape]="'circle'" class="mr-sm"></button>
|
<button nz-button [nzLoading]="true" [nzShape]="'circle'" [nzType]="'primary'"></button>
|
</nz-card>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Multiple Buttons">
|
<button nz-button [nzType]="'primary'" class="mr-sm">
|
<span>primary</span>
|
</button>
|
<button nz-button [nzType]="'default'" class="mr-sm">
|
<span>secondary</span>
|
</button>
|
<nz-dropdown class="mr-sm">
|
<button nz-button nz-dropdown><span>more</span> <i class="anticon anticon-down"></i></button>
|
<ul nz-menu>
|
<li nz-menu-item>
|
<a>1st item</a>
|
</li>
|
<li nz-menu-item>
|
<a>2nd item</a>
|
</li>
|
<li nz-menu-item>
|
<a>3rd item</a>
|
</li>
|
</ul>
|
</nz-dropdown>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Ghost Button">
|
<div class="bg-grey p-lg">
|
<button nz-button [nzType]="'primary'" [nzGhost]="true" class="mr-sm">
|
<span>Primary</span>
|
</button>
|
<button nz-button [nzType]="'default'" [nzGhost]="true" class="mr-sm">
|
<span>Default</span>
|
</button>
|
<button nz-button [nzType]="'dashed'" [nzGhost]="true" class="mr-sm">
|
<span>Dashed</span>
|
</button>
|
<button nz-button [nzType]="'danger'" [nzGhost]="true">
|
<span>Danger</span>
|
</button>
|
</div>
|
</nz-card>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Button Group">
|
<h4 class="pb-sm">Basic</h4>
|
<nz-button-group>
|
<button nz-button>Cancel</button>
|
<button nz-button [nzType]="'primary'">OK</button>
|
</nz-button-group>
|
<nz-button-group>
|
<button nz-button [nzType]="'default'" disabled>
|
<span>L</span>
|
</button>
|
<button nz-button [nzType]="'default'" disabled>
|
<span>M</span>
|
</button>
|
<button nz-button [nzType]="'default'" disabled>
|
<span>R</span>
|
</button>
|
</nz-button-group>
|
<nz-button-group>
|
<button nz-button [nzType]="'primary'" disabled>
|
<span>L</span>
|
</button>
|
<button nz-button [nzType]="'default'" disabled>
|
<span>M</span>
|
</button>
|
<button nz-button [nzType]="'default'">
|
<span>M</span>
|
</button>
|
<button nz-button [nzType]="'dashed'" disabled>
|
<span>R</span>
|
</button>
|
</nz-button-group>
|
<h4 class="py-sm">With Icon</h4>
|
<nz-button-group>
|
<button nz-button [nzType]="'primary'">
|
<i class=" anticon anticon-left"></i>
|
<span>Go back</span>
|
</button>
|
<button nz-button [nzType]="'primary'">
|
<span>Go forward</span>
|
<i class=" anticon anticon-right"></i>
|
</button>
|
</nz-button-group>
|
<nz-button-group>
|
<button nz-button [nzType]="'primary'">
|
<i class=" anticon anticon-cloud"></i>
|
</button>
|
<button nz-button [nzType]="'primary'">
|
<i class=" anticon anticon-cloud-download"></i>
|
</button>
|
</nz-button-group>
|
<h4 class="py-sm">Size</h4>
|
<nz-button-group [nzSize]="'large'">
|
<button nz-button>Large</button>
|
<button nz-button>Large</button>
|
</nz-button-group>
|
<nz-button-group>
|
<button nz-button>Default</button>
|
<button nz-button>Default</button>
|
</nz-button-group>
|
<nz-button-group [nzSize]="'small'">
|
<button nz-button>Small</button>
|
<button nz-button>Small</button>
|
</nz-button-group>
|
</nz-card>
|
</div>
|
</div>
|
