@forlagshuset/v-tabs

FH Tabs component

ARIA implementation as in https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

FHTabs props

  props: {
    ariaLabel: {
      type: String
    }
  }```

FHTab props:

  props: {
    id: {
      type: String,
      default: null
    },
    name: {
      type: String,
      required: true
    },
    prefix: {
      type: String,
      default: ''
    },
    suffix: {
      type: String,
      default: ''
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
  },

Basic example

<FHTabs>
  <FHTab name="tab button name">
    // Use other components or HTML here!
  <FHTab>
</FHTabs>

Tabs with before/after templates

Using VueJS slots :heart_eyes:

<FHTabs>
  <template #before-tablist>Before Tablist</template>
  <template #after-tablist>After Tablist</template>
  <template #before-panels>Before Panels</template>
  <template #after-panels>After Panels</template>
  <FHTab name="tab button name">
    // Use other components or HTML here!
  <FHTab>
</FHTabs>