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.
