vue magic line

A flexible tabs-component for Vue

40
5
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