Collapse

Shows or hides additional information

Usage

Show

• Item 1
• Item 2
• Item 3

<template>
  <winui-collapse>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </winui-collapse>
</template>

Props

title optional

• Type: string
• Default: "Show" | "Hide" (depending on the collapse state)

The title of the collapse.

open optional

• Type: boolean
• Default: false

The initial collapse state. If true, the collapse will be open.

@toggle optional

• Type: (open: boolean) => void
• Default: undefined

The handler function that will be called when the collapse is toggled. The function will be called with the new collapse state as an argument.

Customization

Use the class name .winui-collapse to override/customize the component's styles.

Examples

Using title as prop

To-do list

• Brush teeth
• Get dressed
• Walk the dog

<template>
  <winui-collapse title="To-do list">
    <ul>
      <li>Brush teeth</li>
      <li>Get dressed</li>
      <li>Walk the dog</li>
    </ul>
  </winui-collapse>
</template>

Using title as slot

📝 To-do list

• Brush teeth
• Get dressed
• Walk the dog

<template>
  <winui-collapse>
    <template #title>
      <h4>📝 To-do list</h4>
    </template>
    <ul>
      <li>Brush teeth</li>
      <li>Get dressed</li>
      <li>Walk the dog</li>
    </ul>
  </winui-collapse>
</template>

Opened by default

Show

• 🐷
• 🐔
• 🐮

<template>
  <winui-collapse open>
    <ul>
      <li>🐷</li>
      <li>🐔</li>
      <li>🐮</li>
    </ul>
  </winui-collapse>
</template>

Using the @toggle event

Reveal a truth

"Parasyte: The Maxim" is the best anime ever!

<template>
  <winui-collapse @toggle="handleToggle" :title="open ? 'Conceal' : 'Reveal a truth'">
    <div>"Parasyte: The Maxim" is the best anime ever!</div>
  </winui-collapse>
</template>

<script>
export default {
  data() {
    return {
      open: false,
    };
  },
  methods: {
    handleToggle(isOpen) {
      this.open = isOpen;
    },
  },
};
</script>