网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
vue-simple-accordion是一个简单的Vue手风琴组件,可让您在Vue.js应用程序中创建完全可配置的手风琴组件。
1.将组件导入到Vue.js应用中。
// import components
import {
VsaList,
VsaItem,
VsaHeading,
VsaContent,
VsaIcon
} from 'vue-simple-accordion';
// import stylesheet
import 'vue-simple-accordion/dist/vue-simple-accordion.css';
// register components
export default {
components: {
VsaList,
VsaItem,
VsaHeading,
VsaContent,
VsaIcon
}
}
2.创建一个基本的手风琴组件,如下所示:
<vsa-list>
<vsa-item>
<vsa-heading>
Accordion Heading
</vsa-heading>
<vsa-content>
Accordiong Panel
</vsa-content>
</vsa-item>
</vsa-list>
3. 配置选项。
tags: {
type: Object,
required: false,
default: {
list: "dl",
list__item: "div",
item__heading: "dt",
heading__content: "span",
heading__icon: "span",
item__content: "dd"
}
},
transition: {
type: String,
required: false,
default: undefined // vsa-collapse.
},
initActive: {
type: Boolean,
required: false,
default: undefined
},
forceActive: {
type: Boolean,
required: false,
default: undefined
},
autoCollapse: {
type: Boolean,
required: false,
default: undefined
},
roles: {
type: Object,
required: false,
default: {
presentation: false,
heading: false,
region: true
}
},
navigation: {
type: Boolean,
required: false,
default: undefined
}
转载请注明来源:简单可配置的Vue手风琴组件/插件(vue-simple-accordion)
本文永久链接地址:https://www.moyouyouw.cn/code/1292.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论