Custom element wrapping arbitrary content in a tabbed view.
npm install @bgoodman/tab-pane
yarn add @bgoodman/tab-pane
The child elements of tab-pane
becomes the tabbed views. Use attribute data-tab
to set the text label of each respective tab button.
<script type="module" src="./dist/index.js"></script>
<tab-pane tab-position="top">
<div data-tab="Some Text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div data-tab="Disabled" disabled>Nothing to see here.</div>
<div data-tab="An Image">
<img src="http://lorempixel.com/400/200/" />
</div>
</tab-pane>
Sets the currently visible pane by its index, starting from 0 (first child). Reflected as property selectedPane
.
Specify placement of tabs as "top"
(default) or "left"
of the content.
Takes a value for the css rule background
, governs the selected tab button and visible child.
Provide a string to set as the label for tab's button.
If present or set as "true"
, disables the click action of the tab button, making its view unreachable.
Returns the index of the currently visible pane, starting from 0. Can be set to a new value to change the currently visible pane. Throws error if set value is out of range.
Specify placement of tabs as "top"
(default) or "left"
of the content.
Emitted on change of the selectedPane
property.