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"
                :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" 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>

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

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

Improve this page on GitHub