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>