28 lines
875 B
TypeScript
28 lines
875 B
TypeScript
|
import { html } from '@design.estate/dees-element';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Demo for dees-pagination component
|
||
|
|
*/
|
||
|
|
export const demoFunc = () => html`
|
||
|
|
<div style="display: flex; align-items: center; gap: 16px;">
|
||
|
|
<!-- Small set of pages -->
|
||
|
|
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||
|
|
<span>5 pages, starting at 1:</span>
|
||
|
|
<dees-pagination
|
||
|
|
.total=${5}
|
||
|
|
.page=${1}
|
||
|
|
@page-change=${(e: CustomEvent) => console.log('Page changed to', e.detail.page)}
|
||
|
|
></dees-pagination>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Larger set of pages -->
|
||
|
|
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||
|
|
<span>15 pages, starting at 8:</span>
|
||
|
|
<dees-pagination
|
||
|
|
.total=${15}
|
||
|
|
.page=${8}
|
||
|
|
@page-change=${(e: CustomEvent) => console.log('Page changed to', e.detail.page)}
|
||
|
|
></dees-pagination>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|