Collapse

The Collapse component is a disclosure widget that displ information only when toggled to the open state. The component is implemented based on the HTML <details> element and consists of two elements: a disclosure label (trigger) and a section of content whose visibility it controls. This component also implements the W3C ARIA APG Disclosure (Show/Hide) Pattern and also supports the W3C ARIA APG Accordion Pattern.

Examples

Base

A custom trigger can be passed in the trigger slot. When the controlled content is hidden, the trigger is often styled as a typical push button with a right-pointing arrow or triangle, to indicate that activating the trigger will display the hidden content. When the content is visible, the arrow or triangle usually points down.

Accessibility Note:

The trigger container is already an interactive element with the role="button" attribute. For accessibility reasons, prevent adding other interactive elements such as buttons to avoid nested-interactive accessibility problems.

Show code

HTML

<section>
    <o-collapse expanded>
        <template #trigger="{ open }">
            <h3 class="trigger">
                <o-icon :icon="open ? 'chevron-down' : 'chevron-right'" />
                {{ open ? "Close" : "Open" }} Collapse!
            </h3>
        </template>

        <div class="notification">
            <h4>Subtitle</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                <br />
                Nulla accumsan, metus ultrices eleifend gravida, nulla nunc
                varius lectus, nec rutrum justo nibh eu lectus.
                <br />
                Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
                erat vel, interdum mattis neque.
            </p>
        </div>
    </o-collapse>
</section>

SCSS

.trigger {
    padding: 1rem;
    background-color: var(--vp-c-brand-2);
    color: white;
    box-shadow:
        0 2px 3px hsla(0, 0%, 4%, 0.1),
        0 0 0 1px hsla(0, 0%, 4%, 0.1);
    text-align: center;
}

Position

The collapse can be configured by the position property to open to top instead of bottom.

Show code

HTML

<section>
    <o-collapse expanded position="top">
        <template #trigger="{ open }">
            <p class="trigger">
                <o-icon :icon="open ? 'chevron-down' : 'chevron-right'" />
                {{ open ? "Close" : "Open" }} Collapse!
            </p>
        </template>

        <div class="notification">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                <br />
                Nulla accumsan, metus ultrices eleifend gravida, nulla nunc
                varius lectus, nec rutrum justo nibh eu lectus.
                <br />
                Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
                erat vel, interdum mattis neque.
            </p>
        </div>
    </o-collapse>
</section>

SCSS

.trigger {
    padding: 1rem;
    background-color: var(--vp-c-brand-3);
    color: white;
    box-shadow:
        0 2px 3px hsla(0, 0%, 4%, 0.1),
        0 0 0 1px hsla(0, 0%, 4%, 0.1);
    text-align: center;
}

Accordion

Using the name property multiple collapse components can be connected to create an accordion behaviour, with only one open at a time.

Show code

HTML

<section>
    <o-collapse
        v-for="(collapse, index) of collapses"
        :key="index"
        class="card"
        name="my-accordion"
        expanded
        :open="index === 0">
        <template #trigger="{ open }">
            <div class="card-header">
                <span class="card-header-title">
                    {{ collapse.title }}
                </span>

                <span class="card-header-icon">
                    <o-icon :icon="open ? 'caret-up' : 'caret-down'" />
                </span>
            </div>
        </template>

        <div class="card-content">
            <p class="content" v-html="collapse.text" />
        </div>
    </o-collapse>
</section>

JS

import { ref } from "vue";

const collapses = ref([
    {
        title: "Open to read something intersting written for you!",
        text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
          Nulla accumsan, metus ultrices eleifend gravida, <br />
          nulla nunc varius lectus, nec rutrum justo nibh eu lectus. <br />
          Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.`,
    },
    {
        title: "What the different between Oruga and Buefy?",
        text: "Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. <br />",
    },
    {
        title: "Nothing special, ignore it!",
        text: "Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.",
    },
]);

SCSS

.card {
    position: relative;
    background-color: #fff;
    box-shadow:
        0 2px 3px hsla(0, 0%, 4%, 0.1),
        0 0 0 1px hsla(0, 0%, 4%, 0.1);
}

.card-header {
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px hsla(0, 0%, 4%, 0.1);
}

.card-header-title {
    flex-grow: 1;
    font-weight: 700;
    padding: 0.75rem;
}

.card-header-icon {
    cursor: pointer;
    padding: 0.75rem;
}

.card-content {
    padding: 1.5rem;
}

Collapse Component

An easy disclosure widget to toggle content visability.

<o-collapse></o-collapse>

Props

Prop name	Description	Type	Values	Default
contentId	Id property of the content container - default is an uuid	string	-	useId()
expanded	Expand the trigger to fullwidth	boolean	-	false
label	Some label displayed in the summary element - unnecessary when trigger slot is used	string	-
name	Setting the same name to multiple collapse elements connects them together, with only one open at a time. This allows to easily create UI features such as accordions.	string	-
open	Whether collapse is open or not, use v-model:open to make it two-way binding	boolean	-	false
override	Override existing theme classes completely	boolean	-
position	Trigger position	"bottom" | "top"	top, bottom	From config: collapse: {   position: "bottom" }
triggerId	Id property of the trigger container - default is an uuid	string	-	useId()

Events

Event name	Properties	Description
update:open	value boolean - updated open prop	open prop two-way binding
open	event ToggleEvent - the native toggle event	on collapse opened
close	event ToggleEvent - the native toggle event	on collapse closed

Slots

Name	Description	Bindings
trigger	Define the collapse trigger element	open boolean - collapse open state
default	Content to collapse

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class Inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
positionClass	Class of the root element with position.	position
triggerClass	Class of the trigger element.
expandedClass	Class of the trigger element when expanded.	expanded
contentClass	Class of the content element.

Sass Variables

Current theme ➜ Oruga

SASS Variable	Default

See ➜ 📄 SCSS file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.