Skip to content

MazAccordion

MazAccordion is a standalone component that allows you to create an accordion with a title and content.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

vue
<template>
  <MazAccordion>
    <template #title-1>
      Title 1
    </template>
    <template #content-1>
      Content 1
    </template>

    <template #title-2>
      Title 2
    </template>
    <template #content-2>
      Content 2
    </template>

    <template #title-3>
      Title 3
    </template>
    <template #content-3>
      Content 3
    </template>

    <template #title-4>
      Title 4
    </template>
    <template #content-4>
      Content 4
    </template>
  <MazAccordion>
</template>

<script lang="ts" setup>
  import MazAccordion from 'maz-ui/components/MazAccordion'
</script>

Props, Event & Slots

Props

Prop nameDescriptionTypeValuesDefault
idstring-undefined
modelValuenumber-0
contentClassunknown-undefined

Events

Event namePropertiesDescription
update:model-value

Slots

NameDescriptionBindings
title-${step}
content
content-${step}