<div class="content__title">
|
<h1>
|
Notifications
|
<small>A complete set of notification posibilities</small>
|
</h1>
|
<nz-breadcrumb>
|
<nz-breadcrumb-item>
|
<a [routerLink]="['/dashboard']">Dashboard</a>
|
</nz-breadcrumb-item>
|
<nz-breadcrumb-item>
|
<a [routerLink]="['/elements/buttons']">Buttons</a>
|
</nz-breadcrumb-item>
|
<nz-breadcrumb-item>
|
Notifications
|
</nz-breadcrumb-item>
|
</nz-breadcrumb>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Message">
|
<div nz-form>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="6">
|
<label nz-form-item-required>Type</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="18">
|
<nz-radio-group [(ngModel)]="message.type">
|
<label nz-radio-button [nzValue]="'info'">
|
<span>Normal</span>
|
</label>
|
<label nz-radio-button [nzValue]="'success'">
|
<span>Success</span>
|
</label>
|
<label nz-radio-button [nzValue]="'error'">
|
<span>Error</span>
|
</label>
|
<label nz-radio-button [nzValue]="'warning'">
|
<span>Warning</span>
|
</label>
|
<label nz-radio-button [nzValue]="'loading'">
|
<span>Loading</span>
|
</label>
|
</nz-radio-group>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="6">
|
<label for="messageContent" nz-form-item-required>Content</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="18">
|
<nz-input [nzSize]="'large'" [(ngModel)]="message.content" [nzId]="'messageContent'"></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="6">
|
<label for="messageDuration" nz-form-item-required>Duration</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="18">
|
<nz-slider [(ngModel)]="message.duration" [nzMin]="0" [nzMax]="10" [nzMarks]="marks"></nz-slider>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-control nz-col [nzSpan]="18" [nzOffset]="6">
|
<button nz-button (click)="createMessage()" [nzType]="'primary'">Show</button>
|
<button nz-button (click)="clearMessage()">Clear</button>
|
</div>
|
</div>
|
</div>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Notification">
|
<div nz-form>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="6">
|
<label nz-form-item-required>Type</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="18">
|
<nz-radio-group [(ngModel)]="notify.type">
|
<label nz-radio-button [nzValue]="'info'">
|
<span>Normal</span>
|
</label>
|
<label nz-radio-button [nzValue]="'success'">
|
<span>Success</span>
|
</label>
|
<label nz-radio-button [nzValue]="'error'">
|
<span>Error</span>
|
</label>
|
<label nz-radio-button [nzValue]="'warning'">
|
<span>Warning</span>
|
</label>
|
<label nz-radio-button [nzValue]="'blank'">
|
<span>Blank</span>
|
</label>
|
</nz-radio-group>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="6">
|
<label for="notifyTitle" nz-form-item-required>Title</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="18">
|
<nz-input [nzSize]="'large'" [(ngModel)]="notify.title" [nzId]="'notifyTitle'"></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="6">
|
<label for="notifyContent" nz-form-item-required>Content</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="18">
|
<nz-input [nzSize]="'large'" [(ngModel)]="notify.content" [nzId]="'notifyContent'"></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="6">
|
<label for="notifyDuration" nz-form-item-required>Duration</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="18">
|
<nz-slider [(ngModel)]="notify.duration" [nzMin]="0" [nzMax]="10" [nzMarks]="marks"></nz-slider>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-control nz-col [nzSpan]="18" [nzOffset]="6">
|
<button nz-button (click)="createNotify()" [nzType]="'primary'">Show</button>
|
<button nz-button (click)="clearNotify()">Clear</button>
|
</div>
|
</div>
|
</div>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Alert Styles">
|
<nz-alert [nzType]="'success'" [nzShowIcon]="'true'" class="mb-md">
|
<span alert-body>
|
<pre>Success Text</pre>
|
</span>
|
</nz-alert>
|
<nz-alert [nzType]="'info'" [nzCloseable]="'true'" class="mb-md">
|
<span alert-body>
|
<pre>Info Text</pre>
|
</span>
|
</nz-alert>
|
<nz-alert [nzType]="'warning'" [nzCloseText]="'Close Now'" class="mb-md">
|
<span alert-body>
|
<pre>Warning Text</pre>
|
</span>
|
</nz-alert>
|
<nz-alert [nzType]="'error'" [nzMessage]="'Error'" [nzCloseable]="'true'"
|
[nzDescription]="'This is an error message about copywriting.'" [nzShowIcon]="'true'"></nz-alert>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Progress Bar">
|
<h4 class="pb-sm">Basic</h4>
|
<nz-progress [ngModel]="30"></nz-progress>
|
<nz-progress [ngModel]="50" [nzStatus]="'active'"></nz-progress>
|
<nz-progress [ngModel]="percent" [nzStatus]="'exception'"></nz-progress>
|
<div class="width-sm">
|
<nz-progress [ngModel]="percent"></nz-progress>
|
<nz-progress [ngModel]="50" [nzShowInfo]="false"></nz-progress>
|
</div>
|
<h4 class="py-sm">Circular</h4>
|
<nz-progress [ngModel]="75" [nzType]="'circle'" [nzWidth]="80"></nz-progress>
|
<nz-progress [ngModel]="percent" [nzType]="'circle'" [nzWidth]="60" [nzStrokeWidth]="4" [nzStatus]="'exception'" class="mx-sm"></nz-progress>
|
<nz-progress [ngModel]="percent" [nzType]="'circle'" [nzWidth]="40" [nzStrokeWidth]="2"></nz-progress>
|
<nz-button-group class="ml-lg">
|
<button nz-button (click)="decline()" [nzType]="'ghost'"><i class="anticon anticon-minus"></i></button>
|
<button nz-button [nzType]="'ghost'" (click)="increase()"><i class="anticon anticon-plus"></i></button>
|
</nz-button-group>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Popconfirm">
|
<nz-popconfirm [nzTitle]="'Are you sure?'"
|
[nzOkText]="'Yes'" [nzCancelText]="'No'"
|
(nzOnConfirm)="popConfirm()" (nzOnCancel)="popCancel()">
|
<a nz-popconfirm>Delete</a>
|
</nz-popconfirm>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Tooltip">
|
<nz-tooltip [nzTitle]="'prompt text'">
|
<span nz-tooltip class="mr-sm">Tooltip will show when mouse enter.</span>
|
</nz-tooltip>
|
<nz-tooltip>
|
<button nz-button nz-tooltip>This Tooltip Have Icon</button>
|
<ng-template #nzTemplate>
|
<i class="anticon anticon-file"></i> <span>带图标的Tooltip</span>
|
</ng-template>
|
</nz-tooltip>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Popover">
|
<nz-popover [nzTitle]="'Title'" [nzPlacement]="'left'">
|
<button nz-button nz-popover>Hover me</button>
|
<ng-template #nzTemplate>
|
<p>Content</p>
|
<p>Content</p>
|
</ng-template>
|
</nz-popover>
|
<nz-popover [nzTitle]="'Title'" [nzTrigger]="'click'">
|
<button nz-button nz-popover class="ml-sm">Click me</button>
|
<ng-template #nzTemplate>
|
<p>Content</p>
|
<p>Content</p>
|
</ng-template>
|
</nz-popover>
|
</nz-card>
|
</div>
|
</div>
|
