lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
279 lines (256 loc) • 13.9 kB
HTML
<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js"></script>
<script>
if (globalThis.LightviewRouter) {
LightviewRouter.base('/index.html');
}
</script>
<!-- Load the page-specific stylesheet -->
<link rel="stylesheet" href="./index.css">
<!-- Gallery Structure -->
<div class="gallery-page">
<div class="gallery-layout">
<!-- Sidebar Overlay -->
<div id="sidebar-overlay" class="sidebar-overlay"></div>
<!-- Sidebar -->
<div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
<!-- Main Content -->
<div id="gallery-main" class="gallery-main">
<!-- Header Container -->
<div
style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
<!-- Breadcrumbs Row -->
<div style="padding: 0.75rem 1.5rem 0;">
<script>
(() => {
const { Breadcrumbs } = Lightview.tags;
const breadcrumbs = Breadcrumbs({
id: 'page-breadcrumbs',
items: [
{ label: 'Components', href: '/docs/components' },
{ label: 'Pagination' }
]
});
document.currentScript.replaceWith(breadcrumbs.domEl);
})();
</script>
</div>
<!-- Title Row -->
<div class="gallery-header"
style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
<button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
style="stroke: currentColor; stroke-width: 2;">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
</svg>
</button>
<h1 class="gallery-title">Pagination</h1>
</div>
</div>
<!-- Content -->
<div class="gallery-content">
<div class="section-content" style="max-width: 1000px;">
<p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
Pagination is a group of buttons that allow navigation between pages.
Uses the Join component for grouping.
</p>
<!-- Basic Example with Examplify -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Basic Example</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Interactive pagination with
page state</p>
<!-- Tabs -->
<script>
globalThis.switchSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`tab-btn-${t}`);
const contentEl = document.getElementById(`syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchSyntaxTab('tagged')">Tagged</button>
<button id="tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('vdom')">vDOM</button>
<button id="tab-btn-object" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('object')">Object
DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
type: 'module',
minHeight: 100,
autoRun: true
});
</script><code contenteditable="true">const { default: Join } = await import('/components/layout/join.js');
const { default: Button } = await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
const { div, span } = tags;
const page = signal(1);
const totalPages = 5;
const demo = div({ style: 'display: flex; flex-direction: column; gap: 1rem; align-items: center' },
Join({},
Button({
class: 'join-item',
onclick: () => { if(page.value > 1) page.value--; }
}, '«'),
...Array.from({ length: totalPages }, (_, i) =>
Button({
class: 'join-item',
color: () => page.value === i + 1 ? 'primary' : undefined,
onclick: () => { page.value = i + 1; }
}, i + 1)
),
Button({
class: 'join-item',
onclick: () => { if(page.value < totalPages) page.value++; }
}, '»')
),
span({ class: 'text-sm opacity-70' }, () => `Page ${page.value} of ${totalPages}`)
);
$('#example').content(demo);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
type: 'module',
minHeight: 100
});
</script><code contenteditable="true">const { default: Join } = await import('/components/layout/join.js');
const { default: Button } = await import('/components/actions/button.js');
const { signal, $ } = Lightview;
const page = signal(1);
const totalPages = 5;
const demo = {
tag: 'div',
attributes: { style: 'display: flex; flex-direction: column; gap: 1rem; align-items: center' },
children: [
{
tag: Join,
children: [
{
tag: Button,
attributes: { class: 'join-item', onclick: () => { if (page.value > 1) page.value--; } },
children: ['«']
},
...Array.from({ length: totalPages }, (_, i) => ({
tag: Button,
attributes: {
class: 'join-item',
color: () => page.value === i + 1 ? 'primary' : undefined,
onclick: () => { page.value = i + 1; }
},
children: [i + 1]
})),
{
tag: Button,
attributes: { class: 'join-item', onclick: () => { if (page.value < totalPages) page.value++; } },
children: ['»']
}
]
},
{ tag: 'span', attributes: { class: 'text-sm opacity-70' }, children: [() => `Page ${page.value} of ${totalPages}`] }
]
};
$('#example').content(demo);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
type: 'module',
minHeight: 100
});
</script><code contenteditable="true">const { default: Join } = await import('/components/layout/join.js');
const { default: Button } = await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
tags.Join = Join;
tags.Button = Button;
const page = signal(1);
const totalPages = 5;
const demo = {
div: {
style: 'display: flex; flex-direction: column; gap: 1rem; align-items: center',
children: [
{
Join: {
children: [
{ Button: { class: 'join-item', onclick: () => { if (page.value > 1) page.value--; }, children: ['«'] } },
...Array.from({ length: totalPages }, (_, i) => ({
Button: {
class: 'join-item',
color: () => page.value === i + 1 ? 'primary' : undefined,
onclick: () => { page.value = i + 1; },
children: [i + 1]
}
})),
{ Button: { class: 'join-item', onclick: () => { if (page.value < totalPages) page.value++; }, children: ['»'] } }
]
}
},
{ span: { class: 'text-sm opacity-70', children: [() => `Page ${page.value} of ${totalPages}`] } }
]
}
};
$('#example').content(demo);</code></pre>
</div>
</div>
</div>
<!-- Props Table -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Note</h2>
<div class="alert alert-info" style="margin-bottom: 2rem;">
<span>Pagination uses the <a href="/docs/components/join" class="link">Join</a> component to
group buttons
together.</span>
</div>
<!-- Sizes -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sizes</h2>
<div class="example-stack" style="margin-bottom: 2rem;">
<div class="join">
<button class="join-item btn btn-xs">1</button>
<button class="join-item btn btn-xs btn-active">2</button>
<button class="join-item btn btn-xs">3</button>
</div>
<div class="join">
<button class="join-item btn btn-sm">1</button>
<button class="join-item btn btn-sm btn-active">2</button>
<button class="join-item btn btn-sm">3</button>
</div>
<div class="join">
<button class="join-item btn btn-lg">1</button>
<button class="join-item btn btn-lg btn-active">2</button>
<button class="join-item btn btn-lg">3</button>
</div>
</div>
<!-- Radio Style -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Radio Style</h2>
<div class="join" style="margin-bottom: 2rem;">
<input class="join-item btn btn-square" type="radio" name="options" aria-label="1" checked />
<input class="join-item btn btn-square" type="radio" name="options" aria-label="2" />
<input class="join-item btn btn-square" type="radio" name="options" aria-label="3" />
<input class="join-item btn btn-square" type="radio" name="options" aria-label="4" />
</div>
</div>
</div>
</div>
</div>