58 lines
No EOL
2.9 KiB
HTML
58 lines
No EOL
2.9 KiB
HTML
<!DOCTYPE HTML5>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
layout:decorate="~{layout.htm}">
|
|
|
|
<head>
|
|
<title>Components</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div layout:fragment="content">
|
|
<h2>Components (test page) <a href="/app/static/index.html" target="wc">wc</a></h2>
|
|
<p>You have no direct messages
|
|
<sl-copy-button value="copy text is easy {Date().now}" copy-label="Click to copy"
|
|
success-label="Text copied!" error-label="Whoops, your browser doesn't support this!"></sl-copy-button>
|
|
</p>
|
|
<sl-tree selection="multiple">
|
|
<sl-tree-item lazy="lazy" onsl-lazy-load='{updateLazy}'>Available Trees</sl-tree-item>
|
|
</sl-tree>
|
|
<script type="module">
|
|
const lazyItem = document.querySelector('sl-tree-item[lazy]');
|
|
|
|
lazyItem.addEventListener('sl-lazy-load', () => {
|
|
// Simulate asynchronous loading
|
|
setTimeout(() => {
|
|
const subItems = ['Birch', 'Cedar', 'Maple', 'Pine'];
|
|
|
|
for (const item of subItems) {
|
|
const treeItem = document.createElement('sl-tree-item');
|
|
treeItem.innerText = item;
|
|
lazyItem.append(treeItem);
|
|
}
|
|
|
|
// Disable lazy mode once the content has been loaded
|
|
lazyItem.lazy = false;
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
<hr />
|
|
<sl-carousel navigation="navigation" pagination="pagination" slides-per-page="6" slides-per-move="6">
|
|
<sl-carousel-item style="background: var(--sl-color-red-200);">Slide 1</sl-carousel-item>
|
|
<sl-carousel-item style="background: var(--sl-color-orange-200);">Slide 2</sl-carousel-item>
|
|
<sl-carousel-item style="background: var(--sl-color-yellow-200);">Slide 3</sl-carousel-item>
|
|
<sl-carousel-item style="background: var(--sl-color-green-200);">Slide 4</sl-carousel-item>
|
|
<sl-carousel-item style="background: var(--sl-color-blue-200);">Slide 5</sl-carousel-item>
|
|
<sl-carousel-item style="background: var(--sl-color-violet-200);">Slide 6</sl-carousel-item>
|
|
<sl-carousel-item style="background: var(--sl-color-red-200);">Slide 21</sl-carousel-item>
|
|
<sl-carousel-item style="background: var(--sl-color-orange-200);">Slide 22</sl-carousel-item>
|
|
<sl-carousel-item style="background: var(--sl-color-yellow-200);">Slide 23</sl-carousel-item>
|
|
<sl-carousel-item style="background: var(--sl-color-green-200);">Slide 24</sl-carousel-item>
|
|
<sl-carousel-item style="background: var(--sl-color-blue-200);">Slide 25</sl-carousel-item>
|
|
<sl-carousel-item style="background: var(--sl-color-violet-200);">Slide 26</sl-carousel-item>
|
|
</sl-carousel>
|
|
|
|
<hr />
|
|
</div>
|
|
</body>
|
|
|
|
</html> |