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