import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
    selector: 'cm-button-doc',
    templateUrl: './button-doc.component.html',
    styleUrls: ['./button-doc.component.css']
})

export class ButtonDocComponent implements OnInit, OnDestroy {

    apiPath = './docs/components/button-doc/button.api.json';

    doc_1 = {
        title: "按钮类型",
        intro: `按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。
        其中 [nzType]="'default'"可以简化为 nzType="default"，之后不再赘述。`,
        htmlPath: './docs/components/button-doc/button-doc-1/button-doc-1.component.html',
        tsPath: './docs/components/button-doc/button-doc-1/button-doc-1.component.ts'
    }

    doc_2 = {
        title: "图标按钮",
        intro: `当需要在 button 内嵌入 icon 时，请直接在 button 内使用icon。`,
        htmlPath: './docs/components/button-doc/button-doc-2/button-doc-2.component.html',
        tsPath: './docs/components/button-doc/button-doc-2/button-doc-2.component.ts'
    }

    doc_3 = {
        title: "按钮尺寸",
        intro: `按钮有大、中、小三种尺寸。
        通过设置 nzSize 为 large small 分别把按钮设为大、小尺寸。若不设置 nzSize，则尺寸为中。`,
        htmlPath: './docs/components/button-doc/button-doc-3/button-doc-3.component.html',
        tsPath: './docs/components/button-doc/button-doc-3/button-doc-3.component.ts'
    }

    doc_4 = {
        title: "不可用状态",
        intro: `添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。`,
        htmlPath: './docs/components/button-doc/button-doc-4/button-doc-4.component.html',
        tsPath: './docs/components/button-doc/button-doc-4/button-doc-4.component.ts'
    }

    doc_5 = {
        title: "加载中状态",
        intro: `添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。`,
        htmlPath: './docs/components/button-doc/button-doc-5/button-doc-5.component.html',
        tsPath: './docs/components/button-doc/button-doc-5/button-doc-5.component.ts'
    }

    doc_6 = {
        title: "多个按钮组合",
        intro: `按钮组合使用时，推荐使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到 nz-dropdown button 中组合使用。`,
        htmlPath: './docs/components/button-doc/button-doc-6/button-doc-6.component.html',
        tsPath: './docs/components/button-doc/button-doc-6/button-doc-6.component.ts'
    }
    doc_7 = {
        title: "幽灵按钮",
        intro: `幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。`,
        htmlPath: './docs/components/button-doc/button-doc-7/button-doc-7.component.html',
        tsPath: './docs/components/button-doc/button-doc-7/button-doc-7.component.ts'
    }

    doc_8 = {
        title: "按钮组合",
        intro: `可以将多个 nz-button 放入 nz-button-group 的容器中。`,
        htmlPath: './docs/components/button-doc/button-doc-8/button-doc-8.component.html',
        tsPath: './docs/components/button-doc/button-doc-8/button-doc-8.component.ts'
    }

    constructor() {

    }

    ngOnInit() {

    }

    ngOnDestroy() {

    }
}