"步驟條組件"組件: —— 快應用組件庫H-UI



<import name="steps" src="../Common/ui/h-ui/advance/c_steps"></import>
<template>
    <div class="container">
        <steps></steps>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>



<import name="steps" src="../Common/ui/h-ui/advance/c_steps"></import>
<template>
    <div class="container">
        <steps num="2"></steps>
        <steps num="4"></steps>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>



<import name="steps" src="../Common/ui/h-ui/advance/c_steps"></import>
<template>
    <div class="container">
        <steps num="4" current="1"></steps>
        <steps num="4" current="2"></steps>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>



<import name="steps" src="../Common/ui/h-ui/advance/c_steps"></import>
<template>
    <div class="container">
        <steps num="4" current="1" status="error"></steps>
        <steps num="4" current="3" status="success"></steps>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>



<import name="steps" src="../Common/ui/h-ui/advance/c_steps"></import>
<template>
    <div class="container">
        <steps data="{{data}}"></steps>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: [
                { title: '選擇商品' },
                { title: '確定訂單' },
                { title: '支付金額' }
            ]
        }
    }
</script>



<import name="steps" src="../Common/ui/h-ui/advance/c_steps"></import>
<template>
    <div class="container">
        <steps data="{{data}}"></steps>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: [
                { title: '選擇商品', content: '這里是額外的信息，最多兩行' },
                { title: '確定訂單', content: '這里是額外的信息，最多兩行' },
                { title: '支付金額', content: '這里是額外的信息，最多兩行' }
            ]
        }
    }
</script>



<import name="steps" src="../Common/ui/h-ui/advance/c_steps"></import>
<template>
    <div class="container">
        <steps data="{{data}}"></steps>
        <steps data="{{data}}" current="1"></steps>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: [
                { title: '選擇商品', content: '這里是額外的信息，最多兩行',type: 'gift' },
                { title: '確定訂單', content: '這里是額外的信息，最多兩行',type: 'shopping-cart' },
                { title: '支付金額', content: '這里是額外的信息，最多兩行',type: 'money' }
            ]
        }
    }
</script>

掃碼體驗