1. vuepress-plugin-element-tabs
Vuepress plugin - Tabs Container for Vuepress
vuepress-plugin-element-tabs
Package: vuepress-plugin-element-tabs
Created by: superbiger
Last modified: Mon, 23 May 2022 22:08:56 GMT
Version: 0.2.8
License: MIT
Downloads: 410
Repository: https://github.com/superbiger/vuepress-plugin-tabs

Install

npm install vuepress-plugin-element-tabs
yarn add vuepress-plugin-element-tabs

vuepress-plugin-element-tabs

Version
License

Vuepress plugin - markdown custom container to display content in tabs from Element UI

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

 yarn add vuepress-plugin-element-tabs -D
 // .vuepress/config.js
module.exports = {
  plugins: [
    'vuepress-plugin-element-tabs'
  ]
}

Usage

 :::: tabs

::: tab title
__markdown content__
:::


::: tab javascript
``` javascript
() => {
  console.log('Javascript code example')
}
```
:::

::::

Documents

Accepted Value Like That

 :::: 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 ?
 
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;
}

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin