{% include '@bolt-components-tabs/tabs.twig' with {
panels: [
{
label: 'Tab label 1',
content: 'Tab panel 1.',
},
{
label: 'Tab label 2',
content: 'Tab panel 2.',
},
{
label: 'Tab label 3',
content: 'Tab panel 3.',
}
]
} only %}| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
attributes
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
panels
|
All of the tab panels. Each panel should contain a label and content. |
array
| — |
|
|
align
|
Horizontal alignment of tab labels. |
string
|
start
|
|
|
label_spacing
|
Set label spacing. |
string
|
small
|
|
|
panel_spacing
|
Set panel spacing. |
string
|
small
|
|
|
inset
|
Controls spacing placement on tab labels and panels. |
string
|
auto
|
|
|
selected_tab
|
- Minimum is
1 Set selected tab by number. To select the second tab, set to 2. |
integer
|
1
|
|
|
scrollOffsetSelector
|
Selects a fixed element on the page, offsets smooth scrolling by the height of that element. Must be a valid CSS selector. |
string
| — |
|
|
scrollOffset
|
Additional offset for smooth scrolling, integer converted to pixel value. |
integer
| — |
|
items
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
label
|
Tab label used in the navigation. Twig only. |
string
|
Tab
|
|
|
content
|
Tab panel content. |
string
, object
, array
|
— |
|
|
selected
|
Set active state on tab. Only one active tab allowed at a time. Defaults to first tab. |
boolean
|
false
|
|
|
id
|
Unique identifier for each tab label, may be used for deep linking. |
string
| — |
|
npm install @bolt/components-tabs