https://github.com/bidoubiwa/vuepress-plugin-element-tabs
Vuepress plugin - Tabs Container for Vuepress
https://github.com/bidoubiwa/vuepress-plugin-element-tabs
Last synced: 2 months 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 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-25T12:46:24.000Z (over 3 years ago)
- Last Synced: 2025-08-30T08:44:00.326Z (2 months ago)
- Language: SCSS
- Size: 167 KB
- Stars: 1
- Watchers: 1
- 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;
}
```