Accordion

Extends Accordion

import { Accordion } from '@bbc/front-end-kit/vue/showpad'

Showpad-flavoured wrapper around the generic Accordion. Adds the --sp CSS class and exposes isOpen as a v-model.

Getting started

<template>
    <div>
        <Accordion v-model:isOpen="isOpen">
            <template #header>
                Accordion title
            </template>

            <template #content>
                Accordion content
            </template>
        </Accordion>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Accordion } from '@bbc/front-end-kit/vue/showpad'

const isOpen = ref(false)
</script>

API

This component extends from Accordion. All attributes will be passed on to that parent component unless documented here.

Properties

No additional properties next to Accordion.

Models

isOpen

Controls the open state of the accordion.

Type: Boolean

Default: false

Slots

No additional slots next to Accordion. Uses the same #header and #content slots.