<wux-cascader
  visible="{{ visible1 }}"
  default-value="{{ value1 }}"
  title="所在地区"
  options="{{ options1 }}"
  bind:close="onClose1"
  bind:change="onChange1"
  bind:confirm="onConfirm1"
/>

<wux-cascader
  visible="{{ visible2 }}"
  controlled
  value="{{ value2 }}"
  title="所在地区"
  options="{{ options2 }}"
  bind:close="onClose2"
  bind:change="onChange2"
  bind:load="onLoadOptions"
/>

<wux-cascader
  visible="{{ visible3 }}"
  controlled
  value="{{ value3 }}"
  title="Your city"
  cancelText="cancel"
  confirmText="ok"
  options="{{ options3 }}"
  full
  height="540rpx"
  bind:close="onClose3"
  bind:change="onChange3"
  bind:confirm="onConfirm3"
  bind:tabsChange="onTabsChange3"
/>

<wux-cascader
  visible="{{ visible4 }}"
  default-value="{{ value4 }}"
  title="所在地区"
  options="{{ fieldNamesOptions }}"
  defaultFieldNames="{{ fieldNames }}"
  bind:close="onClose4"
  bind:change="onChange4"
  bind:confirm="onConfirm4"
/>

<view class="page">
    <view class="page__hd">
        <view class="page__title">Cascader</view>
        <view class="page__desc">级联选择器</view>
    </view>
    <view class="page__bd">
    	<wux-cell-group title="Cascader">
    		<wux-cell title="Default" extra="{{ title1 }}" bind:click="onOpen1"></wux-cell>
    		<wux-cell title="Async" extra="{{ title2 }}" bind:click="onOpen2"></wux-cell>
    		<wux-cell title="Controlled" extra="{{ title3 }}" bind:click="onOpen3"></wux-cell>
    		<wux-cell title="Custom FieldName" extra="{{ title4 }}" bind:click="onOpen4"></wux-cell>
    	</wux-cell-group>
    </view>
</view>