<demo-block custom-class="white" title="基础用法">
  <van-dropdown-menu>
    <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
    <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
  </van-dropdown-menu>
</demo-block>

<demo-block custom-class="white" title="自定义菜单内容">
  <van-dropdown-menu>
    <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
    <van-dropdown-item id="item" title="{{ itemTitle }}">
      <van-cell title="{{ switchTitle1 }}">
        <van-switch
          slot="right-icon"
          size="24px"
          style="height: 26px"
          checked="{{ switch1 }}"
          active-color="#ee0a24"
          bind:change="onSwitch1Change"
        />
      </van-cell>
      <van-cell title="{{ switchTitle2 }}">
        <van-switch
          slot="right-icon"
          size="24px"
          style="height: 26px"
          checked="{{ switch2 }}"
          active-color="#ee0a24"
          bind:change="onSwitch2Change"
        />
      </van-cell>
      <view style="padding: 5px 16px;">
        <van-button type="danger" block round bind:click="onConfirm">
          确认
        </van-button>
      </view>
    </van-dropdown-item>
  </van-dropdown-menu>
</demo-block>

<demo-block custom-class="white" title="自定义选中状态颜色">
  <van-dropdown-menu active-color="#1989fa">
    <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
    <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
  </van-dropdown-menu>
</demo-block>

<demo-block custom-class="white" title="向上展开">
  <van-dropdown-menu direction="up">
    <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
    <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
  </van-dropdown-menu>
</demo-block>

<demo-block custom-class="white" title="禁用菜单">
  <van-dropdown-menu>
    <van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
    <van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
  </van-dropdown-menu>
</demo-block>