Collapse

Collapse is a easy way to toggle what you want

<template>
    <section>

        <b-collapse :open="false" aria-id="contentIdForA11y1">
            <button
                class="button is-primary"
                slot="trigger"
                aria-controls="contentIdForA11y1">Click me!</button>
            <div class="notification">
                <div class="content">
                    <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>
            </div>
        </b-collapse>

    </section>
</template>

# Panel

Title

All Public Private

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.
<template>
    <section>

        <div class="block">
            <button
                class="button is-medium is-primary"
                @click="isOpen = !isOpen"
                aria-controls="contentIdForA11y2">Toggle</button>
        </div>

        <b-collapse
            aria-id="contentIdForA11y2"
            class="panel"
            animation="slide"
            :open.sync="isOpen">
            <div
                slot="trigger"
                class="panel-heading"
                role="button"
                aria-controls="contentIdForA11y2">
                <strong>Title</strong>
            </div>
            <p class="panel-tabs">
                <a class="is-active">All</a>
                <a>Public</a>
                <a>Private</a>
            </p>
            <div class="panel-block">
                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.
            </div>
        </b-collapse>

    </section>
</template>

<script>
    export default {
        data() {
            return {
                isOpen: true
            }
        }
    }
</script>

# Card

Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. #buefy.
<template>
    <section>

        <b-collapse class="card" animation="slide" aria-id="contentIdForA11y3">
            <div
                slot="trigger" 
                slot-scope="props"
                class="card-header"
                role="button"
                aria-controls="contentIdForA11y3">
                <p class="card-header-title">
                    Component
                </p>
                <a class="card-header-icon">
                    <b-icon
                        :icon="props.open ? 'menu-down' : 'menu-up'">
                    </b-icon>
                </a>
            </div>
            <div class="card-content">
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
                    <a>#buefy</a>.
                </div>
            </div>
            <footer class="card-footer">
                <a class="card-footer-item">Save</a>
                <a class="card-footer-item">Edit</a>
                <a class="card-footer-item">Delete</a>
            </footer>
        </b-collapse>

    </section>
</template>

# Position

Subtitle

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.

<template>
    <section>
        <div class="content">
            <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>
        <b-collapse :open="false" position="is-bottom" aria-id="contentIdForA11y1">
            <a slot="trigger" slot-scope="props" aria-controls="contentIdForA11y1">
                <b-icon :icon="!props.open ? 'menu-down' : 'menu-up'"></b-icon>
                {{ !props.open ? 'All options' : 'Fewer options' }}
            </a>
            <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>
        </b-collapse>
    </section>
</template>

<style scoped>
    .content {
        margin-bottom: 0 !important;
    }
</style>

# Accordion Effect

Title 1

Text 1

Title 2

Title 3

<template>
    <section>

        <b-collapse
            class="card"
            animation="slide"
            v-for="(collapse, index) of collapses"
            :key="index"
            :open="isOpen == index"
            @open="isOpen = index">
            <div
                slot="trigger"
                slot-scope="props"
                class="card-header"
                role="button">
                <p class="card-header-title">
                    {{ collapse.title }}
                </p>
                <a class="card-header-icon">
                    <b-icon
                        :icon="props.open ? 'menu-down' : 'menu-up'">
                    </b-icon>
                </a>
            </div>
            <div class="card-content">
                <div class="content">
                    {{ collapse.text }}
                </div>
            </div>
        </b-collapse>

    </section>
</template>

<script>
    export default {
        data() {
            return {
                isOpen: 0,
                collapses: [
                {
                    title: 'Title 1',
                    text: 'Text 1'
                },
                {
                    title: 'Title 2',
                    text: 'Text 2'
                },
                {
                    title: 'Title 3',
                    text: 'Text 3'
                }
                ]
            }
        }
    }
</script>

# API

Name
Description
Type
Values
Default
openWhether collapse is open or not, use the .sync modifier to make it two-way binding Boolean true
animationCustom animation (transition name) String fade
aria-idId for the container div. Should be used with aria-controls on trigger for better accessibility. String
positionTrigger position String is-top, is-bottomis-top

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub