<template>
  <div class="demo-dropdown-button">
    <div class="demo-box">
      <ui-dropdown
        button
        type="primary"
        popper-class="demo-dropdown-popper">
        主按钮
        <template slot="dropdown">
          <ui-dropdown-item>小满前端</ui-dropdown-item>
          <ui-dropdown-item>小满后端</ui-dropdown-item>
          <ui-dropdown-item disabled>
            小满测试
          </ui-dropdown-item>
        </template>
      </ui-dropdown>
    </div>

    <div class="demo-box">
      <ui-dropdown
        button
        disabled
        type="danger"
        popper-class="demo-dropdown-popper">
        主按钮
        <template slot="dropdown">
          <ui-dropdown-item>小满前端</ui-dropdown-item>
          <ui-dropdown-item>小满后端</ui-dropdown-item>
          <ui-dropdown-item disabled>
            小满测试
          </ui-dropdown-item>
        </template>
      </ui-dropdown>
    </div>

    <div class="demo-box">
      <ui-dropdown
        button
        type="primary"
        disabled-dropdown
        popper-class="demo-dropdown-popper">
        主按钮
        <template slot="dropdown">
          <ui-dropdown-item>小满前端</ui-dropdown-item>
          <ui-dropdown-item>小满后端</ui-dropdown-item>
          <ui-dropdown-item disabled>
            小满测试
          </ui-dropdown-item>
        </template>
      </ui-dropdown>
    </div>

    <div class="demo-box">
      <ui-dropdown
        button
        type="primary"
        disabled-button
        popper-class="demo-dropdown-popper">
        主按钮
        <template slot="dropdown">
          <ui-dropdown-item>小满前端</ui-dropdown-item>
          <ui-dropdown-item>小满后端</ui-dropdown-item>
          <ui-dropdown-item disabled>
            小满测试
          </ui-dropdown-item>
        </template>
      </ui-dropdown>
    </div>
  </div>
</template>

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