Collapse

A Collapse is a content area commonly used to organize related information that can be collapsed and expanded. It can be triggered by just a heading or a more complex content snippet.


                                                        
                                                        
                                                            <template>
                                                          <w-collapse v-model:open="isOpen" padding="small" :indent="true">
                                                            <template #header>
                                                              <w-text type="subSectionHeading">
                                                                Services
                                                              </w-text>
                                                            </template>
                                                            <template #panel>
                                                              <w-fieldset label="Fieldset label">
                                                                <w-checkbox v-model="selected" label="Checkbox 1" value="1" />
                                                                <w-checkbox v-model="selected" label="Checkbox 2" value="2" />
                                                                <w-checkbox v-model="selected" label="Checkbox 3" value="3" />
                                                                <w-checkbox v-model="selected" label="Checkbox 4" value="4" />
                                                              </w-fieldset>
                                                            </template>
                                                          </w-collapse>
                                                        </template>
                                                        <script>
                                                        export default {
                                                          data() {
                                                            return {
                                                              isOpen: true,
                                                              selected: []
                                                            };
                                                          }
                                                        };
                                                        </script>

Props

Name	Description	Type	Default	Values
divider	Shows a divider at the bottom of the collapse component.	boolean	false	false, true
indent	Indents the collapse content.	boolean	false	false, true
model-value	Controls whether the collapse is open or not.	boolean	false	false, true
padding	Controls the padding of the collapse component.	string	medium	none, small, medium

Slots

Name	Description
header	The header slot can contain a heading or a more complex content snippet.
panel	The panel that holds the collapsed content.

Events

Name	Description	Type
update:modelValue	Emitted when the collapse is toggled.	{ "names": [ "Boolean" ] }