Collapse

An easy way to toggle what you want

Examples

Base

Show code

Accordion

Open to read something intersting written for you!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla accumsan, metus ultrices eleifend gravida,
nulla nunc varius lectus, nec rutrum justo nibh eu lectus.
Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

What the different between Oruga and Buefy?

Nothing special, ignore it!

Show code

HTMLJSSCSS

html

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

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

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

<br />

<section>
    <article v-for="(collapse, index) of collapses" :key="index">
        <o-collapse
            animation="slide"
            :open="isOpenAgain == index"
            @update:open="isOpenAgain = index">
            <template #trigger>
                <o-button variant="success" :label="collapse.title" />
            </template>

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

javascript

import { ref } from "vue";

const isOpen = ref(0);
const isOpenAgain = 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;
}

.trigger-fullwidth {
    width: 100%;
}

Class props

Collapse Title

Collapse Content

How does the Class props inspector work?

Class prop	Description	Props	Suffixes
contentClass	Class of the content.
rootClass	Class of the root element.
triggerClass	Class of the trigger element.

Collapse component

An easy way to toggle what you want

html

<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	string	-	Default function (see source code)
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	"top" \| "bottom"	`top`, `bottom`	From config: `collapse: { position: "top" }`

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

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.

Collapse ​

Examples ​

Base

Subtitle

Accordion

Class props ​

Class prop

Description

Props

Suffixes

Collapse component ​

Props ​

Events ​

Slots ​

Sass variables ​

Collapse

Examples

Class props

Collapse component

Props

Events

Slots

Sass variables