1.7.0 • Published 2 years ago
doz-tab v1.7.0
doz-tab
A simple tab component
Install
npm install doz-tabLive here
Example
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>
`
}
});Props
| 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 |
Web Component
Exposed methods
- selectTabItem(index)
CDN unpkg
<script src="https://unpkg.com/doz-tab/dist/bundle.min.js"></script>Changelog
You can view the changelog here
License
doz-tab is open-sourced software licensed under the MIT license
Author
Fabio Ricali