useDisclosure
The useDisclosure utility gives you controls for a Boolean isOpen value. This can be used to control the visibility of components.
Usage
<script lang="ts" setup> import { SfButton, useDisclosure } from '@storefront-ui/vue'; const { isOpen, toggle, open, close } = useDisclosure(); </script> <template> <SfButton @click="open">Open</SfButton> <SfButton @click="close">Close</SfButton> <SfButton @click="toggle()">Toggle</SfButton> <p v-if="isOpen">This text shows when isOpen value is true.</p> </template> With Initial Value
By default, the value of isOpen is false. But we can pass an initial value using an option object with an initialValue.
<script lang="ts" setup> import { SfButton, useDisclosure } from '@storefront-ui/vue'; const { isOpen, toggle } = useDisclosure({ initialValue: true }); </script> <template> <SfButton @click="toggle()">Toggle</SfButton> <p v-if="isOpen">This will be open by default!</p> </template>