<template>
  <div class="demo-drawer-direction">
    <div class="demo-box">
      <ui-radio-group
        v-model="placement"
        :options="options"></ui-radio-group>
    </div>
    <ui-button @click="showDrawerHandler">
      Open
    </ui-button>
    <ui-drawer
      :visible.sync="visible"
      :placement="placement">
    </ui-drawer>
  </div>
</template>

<script>
import { Drawer, Button, radioGroup } from "amumu-ui"
export default {
  components: {
    "ui-drawer": Drawer,
    "ui-button": Button,
    "ui-radio-group": radioGroup,
  },
  data() {
    return {
      visible: false,
      placement: "top",
      options: [
        {
          label: "上",
          value: "top",
        },
        {
          label: "下",
          value: "bottom",
        },
        {
          label: "左",
          value: "left",
        },
        {
          label: "右",
          value: "right",
        },
      ],
    }
  },
  methods: {
    showDrawerHandler() {
      this.visible = true
    },
  },
}
</script>
