https://github.com/kaifuny/vuepress-plugin-tabs

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

component tabs vuepress-plugin

Last synced: about 2 months ago
JSON representation

Vuepress plugin - Tabs Container for Vuepress

• Host: GitHub
• URL: https://github.com/kaifuny/vuepress-plugin-tabs
• Owner: Kaifuny
• License: other
• Created: 2019-03-13T07:18:56.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-30T17:33:37.000Z (almost 2 years ago)
• Last Synced: 2024-11-01T12:42:12.492Z (about 2 months ago)
• Topics: component, tabs, vuepress-plugin
• Language: CSS
• Homepage: https://superbiger.github.io/vuepress-plugin-tabs/
• Size: 3.99 MB
• Stars: 33
• Watchers: 1
• Forks: 14
• Open Issues: 36
• 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)

## Docs

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

## Install

> This plugin requires VuePress >= 1.0.0, for now you can try it via yarn add vuepress@next -D 

```shell

yarn add vuepress-plugin-element-tabs -D

```

```javascript

// .vuepress/config.js

module.exports = {

  plugins: [

    '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;

}

```