Add accordion macro

This commit is contained in:
graham-dds 2019-11-14 17:19:29 -05:00
parent 4d72d8dece
commit dc73963cb9
3 changed files with 52 additions and 0 deletions

View File

@ -0,0 +1,14 @@
import ToggleMixin from '../mixins/toggle'
export default {
name: 'accordion',
mixins: [ToggleMixin],
props: {
defaultVisible: {
type: Boolean,
default: false,
},
},
}

View File

@ -30,6 +30,7 @@ import SemiCollapsibleText from './components/semi_collapsible_text'
import ToForm from './components/forms/to_form'
import ClinFields from './components/clin_fields'
import PopDateRange from './components/pop_date_range'
import Accordion from './components/accordion'
Vue.config.productionTip = false
@ -40,6 +41,7 @@ Vue.mixin(Modal)
const app = new Vue({
el: '#app-root',
components: {
Accordion,
dodlogin,
toggler,
optionsinput,

View File

@ -0,0 +1,36 @@
{% macro Accordion(title, id) %}
<accordion inline-template>
<li>
<template v-if="isVisible">
<button
v-on:click="toggle($event)"
class="usa-accordion-button"
aria-controls="{{ id }}"
aria-expanded="true"
>
{{ title }}
</button>
</template>
<template v-else>
<button
v-on:click="toggle($event)"
class="usa-accordion-button"
aria-expanded="false"
aria-controls="{{ id }}"
>
{{ title }}
</button>
</template>
<template v-if="isVisible">
<div id="{{ id }}" class="usa-accordion-content" aria-hidden="false">
{{ caller() }}
</div>
</template>
<template v-else>
<div id="{{ id }}" class="usa-accordion-content" aria-hidden="true">
{{ caller() }}
</div>
</template>
</li>
</accordion>
{% endmacro %}