kaifuny / vuepress-plugin-tabs Goto Github PK

View Code? Open in Web Editor NEW

34.0 1.0 14.0 4.09 MB

Vuepress plugin - Tabs Container for Vuepress

Home Page: https://superbiger.github.io/vuepress-plugin-tabs/

License: Other

Vue 21.87% JavaScript 8.20% CSS 69.93%

vuepress-plugin tabs component

vuepress-plugin-tabs's Introduction

vuepress-plugin-element-tabs

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

vuepress-plugin-tabs's People

Contributors

Stargazers

Watchers

Forkers

liaralabs magic-doufu kai9026 krisk plkms blinderjay tortorse msgpo znicholasbrown ianxucode lideming omnichronous wzs28150

vuepress-plugin-tabs's Issues

can i get tabs onchange event?

warning when using stretch

Can not set a value for stretch.

Possible to keep multiple tabs in sync?

So for my documentation site I have something like this:

:::: tabs
::: tab PHP
 // Some code
:::
::: tab Javascript
 // Some code
:::
::::

And then on another page I have the same setup. Is it possible that when I click on, for example, javascript that that decision would retain on each page? So that on each page the javascript tab is active?

Change theme color

How can I change primary text color of the tabs?

Support space titles

https://github.com/superbiger/vuepress-plugin-tabs/blob/8a95a435b5f18ab402fa7969c4a35ce5e50879be/lib/markdownItPlugin.js#L48

I think space titles should be supported，such as:

/* 
  (1)label="title"&lazy
  (2)label="this is title"&lazy
*/
function getTabAttributes(info) {
  return info.split('&').join(' ');
}

Full demo:

:::: tabs

::: tab javascript
``` label="javascript demo"&lazy
() => {
  console.log('Javascript code example')
}
```
:::

::::

😄😄😄

[Question] Nested tabs

I need nested tabs for a set of programming languages in different environments. I need two levels of tabs like shown below. Any idea how to do it?

The plugin has some typos that broke it

Hi~

I submit a PR that should fix this issue: #1

Please review it and publish a new version. Thank you!

Plugin is broken when using "evergreen: true" in vuepress configuration

We have decided to remove IE compatibility from our vuepress site, but when using the evergreen: true option in Vuepress config (as explained at https://vuepress.vuejs.org/config/#browser-compatibility), this seems to break the plugin altogether with a series of Javascript errors. The problem occurs both in Chrome and Firefox (latest versions).

Here is the dev console output:

Console_vuepress.log

Tabs make my browser crash when built in github pages

First of all, thanks for this wonderfull plugin.

This is a very very specific bug in a very specific situation. I cannot wrap my head arround it so I would like your input on it.
Maybe you have a clue.

I use your plugin for the documentation of MeiliSearch. It works great in every page, but in ONE circumstance it makes the whole browser crash.

If you go to the getting started guide from any page of the website, everything works correctly.

BUT

If you go to the getting started guide directly from its url : https://docs.meilisearch.com/guides/introduction/quick_start_guide.html then it makes the browser crash.
It also crashes if you refresh the page.

I cannot reproduce this bug in local (nor in development nor in production).
This bug only appears when it is built on a github page (the bug does not exist on netlify neither).
https://deploy-preview-426--dreamy-wiles-8fd85b.netlify.app/guides/introduction/quick_start_guide.html.

Tests

I made a lot of tests and the problem appears when I add 4 or more "tabs" in the same md page.
I cannot find a way to properly debug this.

Any advice is welcome. I realise this bug is crazy but maybe i'm missing something obvious.

This is the repo: https://github.com/meilisearch/documentation

If title have 3 words => word disappear

I don't know why but hopefully you fix it

When having 2 words

When having 3 words

Vuepress v2 support (vuepress@next)

Hi,

VuePress v2 (a.k.a vuepress@next) is nearing stable state (cf. vuepress/core#68 ) and my company is planning on migrating to it soon. As we use this plugin for our product doc (https://docs.genymotion.com/) I was wondering if there were any plans to port this plugin to VuePress v2?

Thank you.
Best regards