<template>
  <f-switch v-model="isOpen" size="middle" />

  <f-collapse-animation :opened="isOpen">
    <h1>Hello</h1>
    <h1>你看到我了吗？</h1>

    <f-button type="primary">主要按钮</f-button>
    <f-button type="success">成功按钮</f-button>
    <f-button type="danger">危险按钮</f-button>
    <f-button type="warning">警告按钮</f-button>
  </f-collapse-animation>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const isOpen = ref(false)
</script>

<template>
  <f-switch v-model="isOpen2" size="middle" />

  <f-collapse-animation :opened="isOpen2" disabled>
    <h1>Hello</h1>
    <h1>禁止使用！！</h1>
  </f-collapse-animation>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const isOpen2 = ref(true)
</script>