wingsline-tabs.vue 781 B

12345678910111213141516171819202122232425262728293031323334353637
  1. <template>
  2. <ul role="tablist">
  3. <li v-for="tab in tabs" role="presentation" :class="tab.tabClass">
  4. <a v-html="tab.header" :href="`#${tab.generatedId}`" @click="selectPanel(tab.hash)" :aria-controls="tab.hash" :aria-selected="tab.isActive" role="tab"></a>
  5. </li>
  6. </ul>
  7. </template>
  8. <script>
  9. export default {
  10. props: {
  11. for: {
  12. required: true,
  13. type: String
  14. }
  15. },
  16. data: () => ({
  17. tabs: [],
  18. name: "",
  19. }),
  20. created() {
  21. this.$bus.$on(`wingsline-tabs.panels.${this.for}`, (tabs) => {
  22. this.tabs = this.tabs.concat(tabs);
  23. });
  24. },
  25. methods: {
  26. selectPanel(selectedPanelHash) {
  27. this.$bus.$emit("wingsline-tabs.selectTab", {
  28. select: selectedPanelHash,
  29. panel: this.for
  30. });
  31. },
  32. }
  33. };
  34. </script>