标准

提交订单
商品出库
等待收货
完成订单
<div c-widget="Steps;">
    <div c-widget="Step; icon:payment; content: 提交订单"></div>
    <div c-widget="Step; icon:car; content: 商品出库"></div>
    <div c-widget="Step; icon:user; content: 等待收货"></div>
    <div c-widget="Step; icon:checkmark; content: 完成订单"></div>
</div>

状态

提交订单
商品出库
等待收货
完成订单
<div id="orderStatus" c-widget="Steps;"></div>
<script type="text/javascript">
    cola(function(model) {
        model.widgetConfig({
            orderStatus: {
                steps: [{
                    icon: "payment",
                    content: "提交订单"
                }, {
                    icon: "car",
                    content: "商品出库"
                }, {
                    icon: "user",
                    content: "等待收货",
                    states: "active"
                }, {
                    icon: "checkmark",
                    content: "完成订单"
                }]
            }
        })
    });
</script>

Content

提交订单
2015-08-01 20:21:30
商品出库
2015-08-01 23:01:33
等待收货
2015-08-02 08:11:30
完成订单
2015-08-02 11:21:30
<div id="stepContent" c-widget="Steps;" class="small"></div>
<script type="text/javascript">
    cola(function(model) {
        model.widgetConfig({
            stepContent: {
                steps: [{
                    icon: "payment",
                    content: {
                        title: "提交订单",
                        description: "2015-08-01 20:21:30"
                    }
                }, {
                    icon: "car",
                    content: {
                        title: "商品出库",
                        description: "2015-08-01 23:01:33"
                    }
                }, {
                    icon: "user",
                    content: {
                        title: "等待收货",
                        description: "2015-08-02 08:11:30"
                    },
                    states: "active"
                }, {
                    icon: "checkmark",
                    content: {
                        title: "完成订单",
                        description: "2015-08-02 11:21:30"
                    }
                }]
            }
        })
    });
</script>

自动完成

提交订单
商品出库
等待收货
完成订单
提交订单
商品出库
等待收货
完成订单
<div c-widget="Steps;">
    <div c-widget="Step; icon:payment; content: 提交订单"></div>
    <div c-widget="Step; icon:car; content: 商品出库; states:active"></div>
    <div c-widget="Step; icon:user; content: 等待收货"></div>
    <div c-widget="Step; icon:checkmark; content: 完成订单"></div>
</div>
<div c-widget="Steps; autoComplete:false;">
    <div c-widget="Step; icon:payment; content: 提交订单"></div>
    <div c-widget="Step; icon:car; content: 商品出库; states:active"></div>
    <div c-widget="Step; icon:user; content: 等待收货"></div>
    <div c-widget="Step; icon:checkmark; content: 完成订单"></div>
</div>