d2e99cc280
All checks were successful
Build, Test, and Publish (to Private NPM Registry) UI Components Library / publish (push) Successful in 58s
100 lines
No EOL
4.2 KiB
Text
100 lines
No EOL
4.2 KiB
Text
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tabs Test</title>
|
|
<link rel="stylesheet" type="text/css" href="<%= componentsStyleHref %>">
|
|
<script src="<%= componentsScriptSrc %>"></script>
|
|
</head>
|
|
<body>
|
|
<main style="margin-top:1rem;margin-left:1rem;">
|
|
<h1>Tabs Test</h1>
|
|
<section>
|
|
<h2>Tabs with Underlined Variant</h2>
|
|
<%- 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: `<i class="fas fa-star" aria-hidden="true"></i>`,
|
|
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
|
|
}) %>
|
|
<a href="/test/tabs?toggleUnderline=<%= !toggleUnderline %>">Toggle Underline</a>
|
|
</section>
|
|
<section>
|
|
<h2>Tabs with Filled Variant</h2>
|
|
<%- 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
|
|
}) %>
|
|
<a href="/test/tabs?toggleFilled=<%= !toggleFilled %>">Toggle Filled</a>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html> |