Add accordion macro
This commit is contained in:
parent
4d72d8dece
commit
dc73963cb9
14
js/components/accordion.js
Normal file
14
js/components/accordion.js
Normal file
@ -0,0 +1,14 @@
|
||||
import ToggleMixin from '../mixins/toggle'
|
||||
|
||||
export default {
|
||||
name: 'accordion',
|
||||
|
||||
mixins: [ToggleMixin],
|
||||
|
||||
props: {
|
||||
defaultVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
}
|
@ -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,
|
||||
|
36
templates/components/accordion.html
Normal file
36
templates/components/accordion.html
Normal 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 %}
|
Loading…
x
Reference in New Issue
Block a user