<template>
  <div class="demo-dropdown-nesting">
    <ui-dropdown popper-class="demo-dropdown-popper">
      <ui-button
        icon-type="right"
        icon="chevrondown">
        下拉菜单
      </ui-button>
      <template slot="dropdown">
        <ui-dropdown-item>小满前端</ui-dropdown-item>
        <ui-dropdown-item>小满后端</ui-dropdown-item>
        <ui-dropdown-item disabled>
          小满测试
        </ui-dropdown-item>
        <ui-dropdown
          placement="right-start"
          popper-class="demo-dropdown-popper">
          <template>
            <ui-dropdown-item>
              多层级
            </ui-dropdown-item>
          </template>

          <template slot="dropdown">
            <ui-dropdown-item>第二层</ui-dropdown-item>
            <ui-dropdown-item divider>
              第二层
            </ui-dropdown-item>
            <ui-dropdown-item>第二层</ui-dropdown-item>
            <ui-dropdown-item>第二层</ui-dropdown-item>
          </template>
        </ui-dropdown>
      </template>
    </ui-dropdown>
  </div>
</template>

<script>
import { Dropdown, DropdownItem, Button } from "amumu-ui"
export default {
  components: {
    "ui-dropdown": Dropdown,
    "ui-dropdown-item": DropdownItem,
    "ui-button": Button,
  },
}
</script>
<style lang="scss">
.demo-dropdown-popper {
  width: 160px;
}
</style>
