Vue
The useDisclosure composable is a utility that 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>
Usage with events
When using toggle with an event listener like @click, you need to wrap it in a function. Otherwise, the event will be passed as the first argument to toggle and toggle might not work as expected.
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>