doz-tab

A simple tab component

Usage no npm install needed!

<script type="module">
  import dozTab from 'https://cdn.skypack.dev/doz-tab';
</script>

README

doz-tab

A simple tab component

Install

npm install doz-tab

Live 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 ca be top or bottom
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