Collapse

The Collapse component is an easy way to toggle the visibility of content with show/hide functionality. The component supports the W3C ARIA APG Accordion Pattern.

Examples

Base

A custom trigger can be passed in the trigger slot.

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 :open="false" expanded trigger-class="trigger">
        <template #trigger="{ open }">
            <b>{{ open ? "Close" : "Open" }} Collapse!</b>
        </template>

        <div class="notification">
            <h3>Subtitle</h3>
            <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

:deep(.trigger) {
    padding: 1rem;
    background-color: var(--vp-c-brand-1);
    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

Combine multiple collapse components to create an accordion behaviour.

Show code

HTML

<section>
    <o-collapse
        v-for="(collapse, index) of collapses"
        :key="index"
        class="card"
        animation="slide"
        expanded
        :open="isOpen == index"
        @update:open="isOpen = index">
        <template #trigger="props">
            <div class="card-header">
                <span class="card-header-title">
                    {{ collapse.title }}
                </span>

                <span class="card-header-icon">
                    <o-icon
                        :icon="props.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 isOpen = ref(0);

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 way to toggle what you want.

<o-collapse></o-collapse>

Props

Prop name	Description	Type	Values	Default
animation	Custom animation (transition name)	string	-	From config: collapse: {   animation: "fade" }
contentId	Id property of the content container - default is an uuid	string	-	useId()
expanded	Expand the trigger to fullwidth	boolean	-	false
open	Whether collapse is open or not, use v-model:open to make it two-way binding	boolean	-	true
override	Override existing theme classes completely	boolean	-
position	Trigger position	"bottom" | "top"	top, bottom	From config: collapse: {   position: "top" }
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		on collapse opened
close		on collapse closed

Slots

Name	Description	Bindings
trigger	Define the collapse trigger	open boolean - collapse open state
default	Default content

Class Inspector

Classes applied to the element:

How does the Class props 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 ➜ 📄 Full 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.