A simple tab component
npm install doz-tab
Live here
import Doz from 'doz'
import 'doz-tab'
new Doz({
root: '#app',
template(h) {
return h`
<doz-tab buttons-position="bottom">
<doz-tab-item title="Mon">Content first</doz-tab-item>
<doz-tab-item title="Tue">content second</doz-tab-item>
<doz-tab-item title="Wed">content third</doz-tab-item>
<doz-tab-item title="Thu">content fourth</doz-tab-item>
<doz-tab-item title="Fri">content fifth</doz-tab-item>
<doz-tab-item title="Sat">content sixth</doz-tab-item>
<doz-tab-item title="Sun">content seventh</doz-tab-item>
</doz-tab>
`
}
});
Name | Default | Description |
---|---|---|
initial | 0 | Initial tab item selected |
height | 200px | Body height |
buttons-position | top | The buttons position can be top, bottom, left, right |
buttons-size | large | The buttons size can be small or large |
buttons-wrap | false | If the value is true the container sets the css property flex-wrap to wrap |
body-background-color | #eee | Body background color |
button-color | #000 | Button color |
button-background-color | #ccc | Button background color |
button-hover-color | #fff | Button hover color |
button-hover-background-color | #444 | Button hover background color |
button-selected-color | #fff | Button selected color |
button-selected-background-color | #888 | Button selected background color |
- selectTabItem(index)
<script src="https://unpkg.com/doz-tab/dist/bundle.min.js"></script>
You can view the changelog here
doz-tab is open-sourced software licensed under the MIT license