<import src="../common/templates/mode-title.swan" />
<view class="wrap">
    <custom chineseName="级联选择" engName="cascade"></custom>
    <view class="container">
        <view class="card-panel">
            <template is="mode-title" title="短标题样式" />
            <view
                data-index="1"
                class="component-wrap"
                bindtap="bindtap">
                <smt-cascade
                    range="{{multiArray1}}"
                    label="四字标题"
                    range-key="name"
                    bindchange="change"
                    placeholder="{{placeholder}}"
                ></smt-cascade>
            </view>
        </view>
        <view class="card-panel">
            <template is="mode-title" title="长标题样式" />
            <view
                data-index="2"
                class="component-wrap"    
                bindtap="bindtap">
                <smt-cascade
                    range="{{multiArray2}}"
                    label="超出六字标题折行"
                    range-key="name"
                    label-width="6.1em"
                    change-label-color="{{changeLabelColor}}"
                    label-color="{{labelColor2}}"
                    bindchange="change"
                    placeholder="{{placeholder}}"
                ></smt-cascade>
            </view>
        </view>
        <view class="card-panel">
            <template is="mode-title" title="提示样式" />
            <view
                data-index="3"
                class="component-wrap"
                bindtap="bindtap">
                <smt-cascade
                    range="{{multiArray3}}"
                    label="四字标题"
                    range-key="name"
                    bindchange="change"
                    tips="{{tips}}"
                    placeholder="{{placeholder}}"
                ></smt-cascade>
            </view>
        </view>
        <view class="card-panel">
            <template is="mode-title" title="禁用样式" />
            <view
                data-index="4"
                class="component-wrap"
                bindtap="bindtap">
                <smt-cascade
                    range="{{multiArray4}}"
                    label="四字标题"
                    range-key="name"
                    disabled
                    bindchange="change"
                    placeholder="{{placeholder}}"
                ></smt-cascade>
            </view>
        </view>
        <view class="card-panel">
            <template is="mode-title" title="回填样式" />
            <view
                data-index="5"
                class="component-wrap"
                bind-tap="bindtap">
                <smt-cascade
                    cascade-picker-content="cascade-picker-content"
                    range="{{multiArray5}}"
                    value="{{[0, 0, 0]}}"
                    label="四字标题"
                    range-key="name"
                    tips="{{tips}}"
                    bindchange="change"
                    placeholder="{{placeholder}}"
                ></smt-cascade>
            </view>
        </view>
        <view class="card-panel">
            <template is="mode-title" title="自定义样式" />
            <view
                data-index="6"
                class="component-wrap"
                bindtap="bindtap">
                <smt-cascade
                    range="{{multiArray6}}"
                    label="自定义"
                    change-label-color="{{changeLabelColor}}"
                    label-color="{{labelColor1}}"
                    range-key="name"
                    tips="{{tips}}"
                    bindchange="change"
                    placeholder="{{placeholder}}"
                ></smt-cascade>
            </view>
        </view>
    </view>
</view>