vue-magic-line

A tabs-component for Vue.
470
vue vuejs component tabs tab vue-tabs tabpanel tabs-component
Install
npm install vue-magic-line
Latest Version:0.2.2
Vue:2
License:MIT
Last Updated:Feb 17, 2019
Links: npm
Maintainer: piccard

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

Related Packages

vue-tabs

A Vue.js tabs framework (多tab页轻型框架)

12,177 148
tabs vue vue-tabs framework
@enso-ui/tabs

Tab primitives and Bulma tab shells for Enso UI.

10,857 0
tab tabs vue renderless
vue-tmn-tabs

The main idea of this package is to have a standalone tabs component that provid...

4,031 8
component tabs vue vue-tabs
@red-asuka/vitepress-plugin-tabs

VitePress plugin - markdown custom container to display content in tabs

49,189 10
tab tabs plugin vitepress vuepress
vue3-tabs

A touch swipe tab plugin for vue 3.

32,732 41
tab tabs vue plugin slide tab swipe tab vue3 vue3-tabs

Version History

Version Released Vue License
0.2.2 ^2.5.11 MIT
0.2.1 ^2.5.11 MIT
0.2.0 ^2.5.11 MIT
0.1.9 ^2.5.11 MIT
0.1.8 ^2.5.11 MIT