{
    "name": "gov-steps",
    "label": "步骤条",
    "description": "步骤条",
    "codeSnap": "<view>\n    <gov-steps\n        active=\"0\"\n        line-style='dashed'\n        line-color=\"#a9a9a9\"\n        line-width=\"2\"\n        title-color=\"gray\"\n        descColor=\"gray\"\n        steps=\"{{[\n            {\n                text: '步骤一',\n                icon: 'home'\n            },\n            {\n                text: '步骤二'\n            },\n            {\n                text: '步骤三'\n            }\n        ]}}\">\n    </gov-steps>\n</view>",
    "groups": "layout",
    "demoCode": {
        "s": "<view>\n    <view class=\"center\">2步操作</view>\n    <gov-steps\n        active=\"1\"\n        line-style=\"solid\"\n        steps=\"{{twoSteps}}\">\n    </gov-steps>\n    <view class=\"center\">3步操作</view>\n    <gov-steps\n        active=\"1\"\n        line-style=\"solid\"\n        steps=\"{{steps}}\">\n    </gov-steps>\n    <view class=\"center\">4步操作</view>\n    <gov-steps\n        active=\"1\"\n        line-style=\"solid\"\n        steps=\"{{fourSteps}}\">\n    </gov-steps>\n    <view class=\"center\">未执行步骤条</view>\n    <gov-steps\n        active=\"0\"\n        line-style=\"solid\"\n        line-color=\"#a9a9a9\"\n        line-width=\"2\"\n        title-color=\"gray\"\n        descColor=\"gray\"\n        steps=\"{{steps}}\">\n    </gov-steps>\n    <view class=\"center\">执行中步骤条</view>\n    <gov-steps\n        active=\"1\"\n        color='#bc8f8f'\n        active-color=\"#c40311\"\n        line-style=\"solid\"\n        line-color=\"#bc8f8f\"\n        line-width=\"2\"\n        title-color=\"gray\"\n        title-active-color=\"#c40311\"\n        steps=\"{{fuStepsing}}\">\n    </gov-steps>\n    <view class=\"center\">已完成状态步骤条</view>\n    <gov-steps\n        active=\"{{3}}\"\n        line-style=\"solid\"\n        active-color=\"#c40311\"\n        line-color=\"#bc8f8f\"\n        line-active-color=\"#c40311\"\n        line-active-style=\"dotted\"\n        title-color=\"gray\"\n        title-active-color=\"#c40311\"\n        line-width=\"4\"\n        steps=\"{{activeSteps}}\">\n    </gov-steps>\n    <view class=\"center\">有副标题步骤条</view>\n    <gov-steps\n        active=\"2\"\n        line-style=\"solid\"\n        line-color=\"#0000cd\"\n        line-width=\"2\"\n        title-color=\"gray\"\n        descColor=\"gray\"\n        title-active-color=\"#4169e1\"\n        descActiveColor=\"#4169e1\"\n        steps=\"{{fuSteps}}\">\n    </gov-steps>\n    <view class=\"center\">有副标题已完成状态步骤条</view>\n    <gov-steps\n        active-color=\"#2b99bb\"\n        line-color=\"#708090\"\n        line-active-color=\"#add8E6\"\n        line-active-style=\"dotted\"\n        active=\"{{3}}\"\n        line-style=\"solid\"\n        line-width=\"4\"\n        descActiveColor=\"#2b99bb\"\n        title-active-color=\"#2b99bb\"\n        steps=\"{{fuActiveSteps}}\">\n    </gov-steps>\n    <view class=\"button-container\">\n        <gov-button\n            button-size=\"large\"\n            button-color=\"default\"\n            button-text=\"点击按钮执行下方自定义icon步骤条的步骤\"\n            button-disabled=\"{{false}}\"\n            bindtap=\"changeIcon\">\n        </gov-button>\n    </view>\n    <view class=\"center\">自定义icon步骤条</view>\n    <gov-steps\n        active=\"{{num}}\"\n        steps=\"{{iconActiveSteps}}\">\n    </gov-steps>\n    <view class=\"button-container\">\n        <gov-button\n            button-size=\"large\"\n            button-color=\"default\"\n            button-text=\"点击按钮执行下方步骤条的步骤\"\n            button-disabled=\"{{false}}\"\n            bindtap=\"changeActive\">\n        </gov-button>\n    </view>\n    <view class=\"center\">8步操作</view>\n    <gov-steps\n        space=\"187.5\"\n        line-style=\"solid\"\n        line-active-color=\"#add8e6\"\n        line-active-style=\"dotted\"\n        active=\"{{numActive}}\"\n        line-width=\"4\"\n        steps=\"{{eightSteps}}\">\n    </gov-steps>\n</view>",
        "js": "Page({\n    data: {\n        num: 0,\n        numActive: 1,\n        twoSteps: [\n            {\n                text: '标题文案标题文案标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案标题文案标题文案'\n            }\n        ],\n        steps: [\n            {\n                text: '标题文案标题文案标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案标题文案标题文案'\n            }\n        ],\n        fourSteps: [\n            {\n                text: '标题文案标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案标题文案'\n            }\n        ],\n        fuStepsing: [\n            {\n                text: '标题文案'\n            },\n            {\n                text: '标题文案'\n            },\n            {\n                text: '标题文案'\n            }\n        ],\n        fuSteps: [\n            {\n                text: '标题文案',\n                desc: '副标题'\n            },\n            {\n                text: '标题文案',\n                desc: '副标题'\n            },\n            {\n                text: '标题文案',\n                desc: '副标题'\n            }\n        ],\n        activeSteps: [\n            {\n                text: '标题文案'\n            },\n            {\n                text: '标题文案'\n            },\n            {\n                text: '标题文案'\n            }\n        ],\n        fuActiveSteps: [\n            {\n                text: '标题文案',\n                desc: '副标题'\n            },\n            {\n                text: '标题文案',\n                desc: '副标题'\n            },\n            {\n                text: '标题文案',\n                desc: '副标题'\n            }\n        ],\n        iconActiveSteps: [\n            {\n                text: '标题文案',\n                icon: 'home',\n                iconColor: '#9370db',\n                activeIcon: 'real-estate-m',\n                iconActiveColor: '#ff69b4'\n            },\n            {\n                text: '标题文案',\n                icon: 'home',\n                iconColor: '#9370db',\n                activeIcon: 'real-estate-m',\n                iconActiveColor: '#ff69b4'\n            },\n            {\n                text: '标题文案',\n                icon: 'home',\n                iconColor: '#9370db',\n                activeIcon: 'real-estate-m',\n                iconActiveColor: '#ff69b4'\n            }\n        ],\n        eightSteps: [\n            {\n                text: '标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案'\n            },\n            {\n                text: '标题文案标题文案标题文案'\n            }\n        ]\n    },\n    showToast() {\n        swan.showToast({\n            title: '步骤已执行完成',\n            icon: 'none'\n        });\n    },\n    changeActive() {\n        const {numActive} = this.data;\n        if (numActive >= 0 && numActive < 8) {\n            this.setData({\n                numActive: ++this.data.numActive\n            });\n        }\n        else {\n            this.showToast();\n        }\n    },\n    changeIcon() {\n        const {num} = this.data;\n        if (num >= 0 && num < 3) {\n            this.setData({\n                num: ++this.data.num\n            });\n        }\n        else {\n            this.showToast();\n        }\n    }\n});",
        "css": ".center {\n    width: 100%; \n    text-align: center;\n}\n.button-container {\n    margin: 30px 0;\n}"
    },
    "fragement": "",
    "properties": {
        "attributes": [
            {
                "name": "active",
                "type": "Number",
                "description": "当前步骤",
                "required": "是",
                "default": "1"
            },
            {
                "name": "color",
                "type": "String",
                "description": "步骤颜色",
                "required": "否",
                "default": "#ccc"
            },
            {
                "name": "active-color",
                "type": "String",
                "description": "已完成步骤颜色",
                "required": "否",
                "default": "#2b99ff"
            },
            {
                "name": "line-color",
                "type": "String",
                "description": "线条颜色",
                "required": "否",
                "default": "#f5f5f5"
            },
            {
                "name": "line-active-color",
                "type": "String",
                "description": "已完成线条颜色",
                "required": "否",
                "default": "#f5f5f5"
            },
            {
                "name": "steps",
                "type": "Array",
                "description": "steps数据",
                "required": "是",
                "default": "[]"
            },
            {
                "name": "steps.text",
                "type": "String",
                "description": "标题",
                "required": "是",
                "default": ""
            },
            {
                "name": "steps.icon",
                "type": "String",
                "description": "自定义icon",
                "required": "否",
                "default": ""
            },
            {
                "name": "steps.activeIcon",
                "type": "String",
                "description": "已完成状态自定义icon",
                "required": "否",
                "default": ""
            },
            {
                "name": "steps.iconColor",
                "type": "String",
                "description": "自定义icon颜色",
                "required": "否",
                "default": ""
            },
            {
                "name": "steps.iconActiveColor",
                "type": "String",
                "description": "已完成状态自定义icon颜色",
                "required": "是",
                "default": ""
            },
            {
                "name": "line-style",
                "type": "String",
                "description": "线条样式: dotted solid double dashed",
                "required": "否",
                "default": "dashed"
            },
            {
                "name": "line-active-style",
                "type": "String",
                "description": "已完成线条样式: dotted solid double dashed",
                "required": "否",
                "default": "solid"
            },
            {
                "name": "line-width",
                "type": "Number",
                "description": "线条宽度,单位是rpx",
                "required": "否",
                "default": "3.62"
            },
            {
                "name": "title-color",
                "type": "String",
                "description": "标题颜色",
                "required": "否",
                "default": "#999"
            },
            {
                "name": "title-active-color",
                "type": "String",
                "description": "已完成标题颜色",
                "required": "否",
                "default": "#000"
            },
            {
                "name": "descColor",
                "type": "String",
                "description": "副标题颜色",
                "required": "否",
                "default": "#999"
            },
            {
                "name": "descActiveColor",
                "type": "String",
                "description": "已完成副标题颜色",
                "required": "否",
                "default": "#999"
            },
            {
                "name": "space",
                "type": "Number",
                "description": "item宽度,指的是每一个步骤之间的距离,单位是rpx",
                "required": "否",
                "default": "162"
            }

        ],
        "externalClasses": [
            {
                "name": "gov-steps",
                "type": "",
                "description": "整体步骤条的扩展样式类，可通过此class改变其的样式，如内边距",
                "required": "否",
                "default": "-"
            },
            {
                "name": "gov-steps-flex",
                "type": "",
                "description": "当步骤小于5时（整体步骤条外层）的扩展样式类，可通过此class改变其的样式，如背景色",
                "required": "否",
                "default": "-"
            },
            {
                "name": "gov-steps-block",
                "type": "",
                "description": "当步骤大于等于5时（整体步骤条外层）的扩展样式类，可以通过此class改变其外层的样式，如设置边距：padding 0 60px",
                "required": "否",
                "default": "-"
            },
            {
                "name": "gov-step",
                "type": "",
                "description": "单个步骤(icon,标题及副标题外层)的扩展样式，可通过此class改变其外部的样式",
                "required": "否",
                "default": "-"
            },
            {
                "name": "gov-step-head",
                "type": "",
                "description": "整体icon外层的扩展样式，可通过此class改变整体icon外层的样式",
                "required": "否",
                "default": "-"
            },
            {
                "name": "gov-step-main",
                "type": "",
                "description": "标题或副标题外层的扩展样式，可通过此class改变其样式，如设置margin-top 100px",
                "required": "否",
                "default": "-"
            }
        ]
    }
}