vuepress-plugin-tabs

This plugin is inspired by vuepress-plugin-element-tabs, but for Vue 3.x and VuePress 2.x

VuePress is evolving rapidly, and there's no stable version yet. This plugin is only tested with VuePress version 2.0.0-beta.60

Install

This plugin requries VuePress>=2.0.0

yarn add -D @snippetors/vuepress-plugin-tabs

// .vuepress/config.js
import tabsPlugin from '@snippetors/vuepress-plugin-tabs'

export default {
  plugins: [
    tabsPlugin(options),
  ],
}

Options

Option	Description	Type	Accepted Values	Default
events	events to dispatch when the component is updated	Array[String]	-	[]

There is only one possible option, events, which is an array of event names. When this component is updated, these events will be dispatched.

For a setting like

module.exports = {
  plugins: ["@snippetors/vuepress-plugin-tabs", ["event1", "event2"]],
};

these events will be dispatched like

window.dispatchEvent(new Event("event1"));
window.dispatchEvent(new Event("event2"));

You can add listeners to the events to get notified when the component is updated.

window.addEventListener("event1", callbackOfEvent1);

Usage

:::: tabs [tabs attributes..]

::: tab tab1 [tab attributes..]

content 1

:::

::: tab tab2 [tab attributes..]

content 2

:::

::::

Tabs Attributes

Attribute	Description	Type	Accepted Values	Default
type	type of Tab	String	card/border-card	border-card
tab-position	position of tabs	String	top/right/bottom/left	top
stretch	whether width of tab automatically fits its container	Boolean	-	false

Tab Attributes

Attribute	Description	Type	Accepted Values	Default
label	title of the tab	String	-	-
eager	whether the tab is eagerly rendered	Boolean	-	false

Note: The tab attribute eager has to be decleared as the last element

Preview

Demo 1

:::: tabs

::: tab tab 1

content 1

:::

::: tab tab 2

content 2

:::

::::

Demo 2

:::: tabs type:card tab-position:bottom

::: tab A

content 1

:::

::: tab a tab with eager in its name

Note that this content won't be eagerly loaded since the word `eager` will be treated as a part of the tab name

:::

::::

Demo 3

:::: tabs tab-position:left

::: tab A

content 1

:::

::: tab B eager

eagerly loaded content

:::

::::

This photo will be eagerly loaded