Toggle

Toggle the visibility of content. Useful for something like an FAQ page, for example. Includes ARIA attributes for expandable content and is keyboard friendly.

• Source

Styled Example

<template>
  <VToggle label="Click here to open the toggle" class="styled">
    <div class="toggle-content">
      <p>Here is the content. Sweet!</p>
    </div>
  </VToggle>
</template>

<style>
.vts-toggle__button {
  display: block;
  width: 100%;
  border: 0;
  padding: 5px;
  font-size: 18px;
  text-align: left;
  color: #FFF;
  background-color: mediumseagreen;
}
.toggle-content {
  border: 1px solid #CCC;
  padding: 5px;
}
</style>

Here is the content. Sweet!

Basic Usage

<template>
  <VToggle label="Toggle label">
    content here
  </VToggle>
</template>

content here

Label Slot

Sometimes just a text string won't do. For example, you may want to add icons or something.

<template>
  <VToggle>
    <template #label>
      <span aria-hidden>🔽</span>
      Title
    </template>

    content here
  </VToggle>
</template>

content here

Scoped Slots

You can access the open status through the scoped slots.

<template>
  <VToggle>
    <template #label="{ isOpen }">
      <span aria-hidden>{{ isOpen ? "🔼" : "🔽" }}</span>
      Title
    </template>

    <template #default="{isOpen}">
      isOpen: {{ isOpen }}
    </template>
  </VToggle>
</template>

isOpen: false

Events

• update: fires on any change and provides the open status
• open: fires on open.
• close: fires on close.

Custom Classes

This component can accept a classes prop to customize the output HTML classes:

:classes="{ root: string, label: string, content: string }"