https://github.com/bidoubiwa/vuepress-plugin-element-tabs

Vuepress plugin - Tabs Container for Vuepress
https://github.com/bidoubiwa/vuepress-plugin-element-tabs

Last synced: 1 day ago
JSON representation

Vuepress plugin - Tabs Container for Vuepress

• Host: GitHub
• URL: https://github.com/bidoubiwa/vuepress-plugin-element-tabs
• Owner: bidoubiwa
• License: other
• Created: 2022-05-24T20:44:05.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-25T12:46:24.000Z (over 2 years ago)
• Last Synced: 2024-12-15T12:06:53.026Z (8 days ago)
• Language: SCSS
• Size: 167 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [vuepress-plugin-element-tabs](https://superbiger.github.io/vuepress-plugin-tabs/)







Vuepress plugin - markdown custom container to display content in tabs from [Element UI](https://github.com/ElemeFE/element)

⚠️ This is a fork of kaifun [vuepress-plugin-tabs](https://github.com/Kaifun/vuepress-plugin-tabs), unfortunately it is not maintained anymore. All credits goes to him for this wonderful plugin.

## Docs

> https://superbiger.github.io/vuepress-plugin-tabs

## Install

> This plugin requires VuePress >= 1.0.0

```shell

yarn add @bidoubiwa/vuepress-plugin-element-tabs -D

```

```javascript

// .vuepress/config.js

module.exports = {

  plugins: [

    '@bidoubiwa/vuepress-plugin-element-tabs'

  ]

}

```

## Usage

~~~ md

:::: tabs

::: tab title

__markdown content__

:::

::: tab javascript

``` javascript

() => {

  console.log('Javascript code example')

}

```

:::

::::

~~~

## Documents

> Accepted Value Like That

~~~md

:::: tabs type:board-card

::: tab title lazy

__markdown content__

:::

::::

~~~

### 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|-|-|

|lazy|whether Tab is lazily rendered|Boolean|-|false|

### Q&A

* How to get mouse position with canvas ?

```javascript

var canvas = document.getElementById('screen');

var mouse = getMouse(canvas);

function addEvent(obj, type, handle) {

  try {

    obj.addEventListener(type, handle, false);

  } catch (e) {

    try {

      obj.attachEvent("on" + type, handle);

    } catch (e) {

      obj["on" + type] = handle;

    }

  }

}

function getMouse(element) {

  var mouse = { x: 0, y: 0 };

  addEvent(element, "mousemove", function(e) {

    var x, y;

    var e = e || window.event;

    const box = element.getBoundingClientRect();

    x = e.clientX - box.x;

    y = e.clientY - box.y;

    mouse.x = x;

    mouse.y = y;

  });

  return mouse;

}

```