Tabs Test
Tabs with Underlined Variant
<%- useComponent('tabs', {
tabs: [
{
title: 'Example Tab',
content: {
id: 'example-tab-1',
contentHTML: include('./tab-partials/tab-1-underline.partial.ejs')
},
active: true
},
{
title: 'A Second Tab',
icon: ``,
content: {
id: 'example-tab-2',
contentHTML: include('./tab-partials/tab-2.partial.ejs')
}
},
{
title: 'Tab Three',
content: {
id: 'example-tab-3',
contentHTML: include('./tab-partials/tab-3-underline.partial.ejs')
}
},
{
title: 'Togglable Tab',
content: {
id: 'example-tab-4',
contentHTML: include('./tab-partials/tab-4.partial.ejs')
},
predicate: ({ toggleUnderline }) => toggleUnderline
}
],
tabsId: 'example-tabs',
tabsAriaLabel: 'Example Tabs',
tabsStyleClasses: ['underlined'],
toggleUnderline
}) %>
Toggle Underline
Tabs with Filled Variant
<%- useComponent('tabs', {
tabs: [
{
title: 'Example Tab',
content: {
id: 'example-tab-1',
contentHTML: include('./tab-partials/tab-1-filled.partial.ejs')
},
active: true
},
{
title: 'A Second Tab',
content: {
id: 'example-tab-2',
contentHTML: include('./tab-partials/tab-2.partial.ejs')
}
},
{
title: 'Tab Three',
content: {
id: 'example-tab-3',
contentHTML: include('./tab-partials/tab-3-filled.partial.ejs')
}
},
{
title: 'Togglable Tab',
content: {
id: 'example-tab-4',
contentHTML: include('./tab-partials/tab-4.partial.ejs')
},
predicate: ({ toggleFilled }) => toggleFilled
}
],
tabsId: 'example-tabs',
tabsAriaLabel: 'Example Tabs',
tabsStyleClasses: ['filled'],
toggleFilled
}) %>
Toggle Filled