import { Meta, Story, Canvas, ArgsTable, Anchor } from '@storybook/addon-docs/blocks';
import './config';
import TabsIntroduction from './content/TabsIntroduction.mdx';

import {
  BTabs as MTabs,
  BTab as MTab
} from 'bootstrap-vue';

<Meta title="Tabs" component={MTabs} />

export const TabTemplate = (arg) => ({
  components: {MTabs, MTab},
  template: `
    <m-tabs>
      <m-tab active title="Tab 1" titleLinkClass="theme-jurnal">
        Content 1
      </m-tab>
      <m-tab title="Tab 2" titleLinkClass="theme-talenta">
        Content 2
      </m-tab>
      <m-tab title="Tab 3" titleLinkClass="theme-klikpajak">
        Content 3
      </m-tab>
      <m-tab title="Tab 4">
        Content 4
      </m-tab>
    </m-tabs>
  `
})

# Tabs

<TabsIntroduction />

<Anchor storyId="tabs--default-story"></Anchor>

## Example

<Canvas>
  <Story
    name="Default"
  >
    {TabTemplate.bind({})}
  </Story>
</Canvas>

All the fucntionalities are the same just like in BootstrapVue. To match the styling with Mekari UI, you can use prop `titleLinkClass` on `m-tab`. The list of available classes are:

```js
// List of classes for `titleLinkClass`
:titleLinkClass= [
  "theme-danger",
  "theme-success",
  "theme-info",
  "theme-warning",
  "theme-primary",
  "theme-jurnal",
  "theme-talenta",
  "theme-klikpajak",
  "theme-mekari",
  "theme-dark",
  "theme-slate",
  "theme-muted",
  "theme-smoke",
  "theme-light",
  "theme-cloud",
  "theme-link",
  "theme-white",
]
```