Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
  <div>
		<h2>Accordion Style</h2>
		<Accordion class="a1" :animate="true">
			<AccordionPanel v-for="menu in menus" :key="menu.text" :title="menu.text" :iconCls="'fa fa-'+menu.iconCls">
				<div style="padding: 5px">
					<a class="item" href="#" v-for="item in menu.submenus" :key="item">{{item}}</a>
				</div>
			</AccordionPanel>
		</Accordion>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        {
          text: "Forms",
          iconCls: "wpforms",
          submenus: ["Form Element", "Wizard", "File Upload"]
        },
        {
          text: "Mail",
          iconCls: "at",
          submenus: ["Inbox", "Sent", "Trash"]
        },
        {
          text: "Layout",
          iconCls: "table",
          submenus: ["Panel", "Accordion", "Tabs"]
        }
      ]
    };
  }
};
</script>
<style>
.a1.accordion .accordion-header {
  border-bottom-color: transparent;
  background: #f3f5f6;
  color: #768399;
}
.a1.accordion .accordion-body {
  border-bottom-color: transparent;
  background: #fcfcfd;
  color: #768399;
}
.a1.accordion .accordion-header .panel-title {
  color: #768399;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
}
.a1.accordion .accordion-header-selected,
.a1.accordion .accordion-header:hover {
  color: #768399;
  background: #eaeeef;
}
.a1 .item {
  text-decoration: none;
  display: block;
  color: #616161;
  padding: 7px 0 7px 20px;
}
.a1 .item:hover {
  color: #428bca;
}
@import "//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
</style>