The tabs component is used to display a group of related content in a tabbed interface. The tabs component consists of a collection of tabs, where each tab represents a different piece of content.
Example
onetwothreepanel onepanel twopanel three
code
<bp-tabs>
<bp-tab-list aria-label="example tablist">
<bp-tab selected>one</bp-tab>
<bp-tab>two</bp-tab>
<bp-tab>three</bp-tab>
</bp-tab-list>
<bp-tab-panel>panel one</bp-tab-panel>
<bp-tab-panel>panel two</bp-tab-panel>
<bp-tab-panel>panel three</bp-tab-panel>
</bp-tabs>
<script type="module">
import '@blueprintui/components/include/tabs.js';
const tabgroup = document.querySelector('bp-tabs');
const tabs = tabgroup.querySelectorAll('bp-tab');
tabgroup.addEventListener('click', (e) => {
if (e.target.tagName === 'BP-TAB') {
tabs.forEach((t) => (t.selected = false));
e.target.selected = true;
}
});
</script>
Vertical
item oneitem twoitem threepanel onepanel twopanel three
code
<bp-tabs layout="vertical">
<bp-tab-list aria-label="example vertical tablist">
<bp-tab selected>item one</bp-tab>
<bp-tab>item two</bp-tab>
<bp-tab>item three</bp-tab>
</bp-tab-list>
<bp-tab-panel>panel one</bp-tab-panel>
<bp-tab-panel>panel two</bp-tab-panel>
<bp-tab-panel>panel three</bp-tab-panel>
</bp-tabs>
<script type="module" interactive>
import '@blueprintui/components/include/tabs.js';
const tabgroup = document.querySelector('bp-tabs');
const tabs = tabgroup.querySelectorAll('bp-tab');
tabgroup.addEventListener('click', (e) => {
if (e.target.tagName === 'BP-TAB') {
tabs.forEach((t) => (t.selected = false));
e.target.selected = true;
}
});
</script>
Install
NPM
import '@blueprintui/components/include/tabs.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/tabs.js/+esm';
</script>
Accessibility
- The tabs component should have a clear visual distinction between the selected and unselected tabs.
- The tabs component should be keyboard accessible, allowing users to navigate and activate tabs using the keyboard.
- The tab label should clearly represent the content it opens.
bp-tabs
Properties
| Name | Types | Description |
|---|
layout | 'horizontal' | 'vertical' | |
Attributes
| Name | Types | Description |
|---|
layout | 'horizontal' | 'vertical' | |
CSS Properties
| Name | Types | Description |
|---|
--background | | |
--color | | |
--border-radius | | |
--padding | | |
Slots
| Name | Types | Description |
|---|
default | | |
bp-tab
Properties
| Name | Types | Description |
|---|
selected | boolean | selected visual state |
tabPanel | BpTabPanel | |
pressed | boolean | turns the button into a toggle button |
expanded | boolean | indicate if a control is expanded or collapsed |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
disabled | boolean | determines if element is mutable or focusable |
type | 'button' | 'submit' | default behavior of the button |
name | string | represents the name of the current |
value | string | determines the current value |
popoverTargetElement | HTMLElement | The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
popoverTargetAction | | 'toggle' | 'show' | 'hide' | The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction |
popovertarget | string | The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
command | string | The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
commandFor | string | The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
form | HTMLFormElement | |
formAction | string | |
formEnctype | string | |
formMethod | string | |
formNoValidate | boolean | |
formTarget | string | |
labels | NodeListOf | |
validationMessage | string | |
validity | ValidityState | |
willValidate | boolean | |
checkValidity | any | |
reportValidity | any | |
setCustomValidity | any | |
formAssociated | boolean | |
Attributes
| Name | Types | Description |
|---|
selected | boolean | selected visual state |
pressed | boolean | turns the button into a toggle button |
expanded | boolean | indicate if a control is expanded or collapsed |
readonly | boolean | makes the element not mutable, meaning the user can not interact with button |
disabled | boolean | determines if element is mutable or focusable |
type | 'button' | 'submit' | default behavior of the button |
name | string | represents the name of the current element as a string. |
value | string | determines the current value |
popoverTargetElement | HTMLElement | The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
popovertargetaction | | 'toggle' | 'show' | 'hide' | The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction |
popovertarget | string | The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget |
command | string | The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
commandFor | string | The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command |
CSS Properties
| Name | Types | Description |
|---|
--background | | |
Slots
| Name | Types | Description |
|---|
default | | |
bp-tab-panel
Properties
CSS Properties
| Name | Types | Description |
|---|
--padding | | |
Slots
| Name | Types | Description |
|---|
default | | |