habibtalib/vue-magic-line

A flexible tabs-component for Vue

vue-magic-line

A tabs-component for Vue.

Demo

You can find some examples here

Configuration

Install component

Globally

import VueMagicLine from 'vue-magic-line'

Vue.use(VueMagicLine)

Locally

import {VueMagicLine, VueMagicLineTab} from 'vue-magic-line';

    export default {
      components: {
        VueMagicLine,
        VueMagicLineTab
      },
      ...

Template

<vue-magic-line>
  <vue-magic-line-tab name="First tab" >
      This is the content of the first vue-magic-line-tab
  </vue-magic-line-tab>
  <vue-magic-line-tab name="Second tab" active>
      <b>This is the content of the second vue-magic-line-tab</b>
  </vue-magic-line-tab>
  <vue-magic-line-tab name="Third tab" disabled>
      This is the content of the third vue-magic-line-tab
  </vue-magic-line-tab> 
  <vue-magic-line-tab name="Fourth tab">
      <i>This is the content of the fourth vue-magic-line-tab</i>
  </vue-magic-line-tab>
  <vue-magic-line-tab name="Fifth tab" disabled>
      This is the content of the fifth vue-magic-line-tab
  </vue-magic-line-tab>
  <vue-magic-line-tab name="Sixth tab">
      <p>This is the content of the sixth vue-magic-line-tab</p>
  </vue-magic-line-tab> 
</vue-magic-line> 

Properties

vue-magic-line

Property	Description	Value	Default value
secondary	show secondary line	Boolean	true
parent	apply to parent and not to link	Boolean	true
magic-line-wrapper-css	CSS for class magic-line-wrapper	Object	{}
magic-line-item-wrapper-css	CSS for class magic-line-item-wrapper	Object	{}
magic-line-item-css	CSS for class magic-line-item	Object	{}
magic-line-item-link-css	CSS for class magic-line-item-link	Object	{}
magic-line-content-wrapper-css	CSS for class magic-line-content-wrapper	Object	{}
primary-color	color for primary line	String	rgb(0, 188, 212)
primary-height	height for primary line	Number	3px
primary-top	add some margin to primary line	Number	3px
secondary-color	color for secondary line	String	rgba(211, 211, 211, 0.4)
secondary-height	height for secondary line	Number	2px
secondary-top	add some margin to secondary line	Number	3px
duration	duration for magic-line transition in seconds	Number	0.3

vue-magic-line-tab

Property	Description	Value	Default value
active	set active tab	Boolean	true
disabled	disable tab	Boolean	false

Events

Event	Description	Parameters
before-set-primary	before positioning primary line	primary-line, tab
set-primary	after positioning primary line	primary-line, tab
before-set-secondary	before positioning secondary line	secondary-line, tab
set-secondary	after positioning secondary line	secondary-line, tab

License

vue-magic-line is licensed under the MIT License - see the LICENSE file for details.

Author

Andreas Stephan