D3vugu-components/components/navigation/pagination.vugu

<div vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1684167638"}'>
	<button @click="c.handleClickPrev(event)"><icons:LChevronLeft></icons:LChevronLeft></button>
	<button @click="c.handleClickNext(event)"><icons:LChevronRight></icons:LChevronRight></button>
	<button vg-for='_, button := range c.buttons' :class="button.Class" vg-content="button.Page" @click="c.handleClickPage(event, button.Page)"></button>
</div>

<style>
	.d3c-1684167638 {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
		margin: 0.5em 0;
		/*border-radius: 4px;
		border: 1px solid var(--d3c-color-border);*/
		/*width: min-content;*/
		overflow: hidden;
	}

	.d3c-1684167638 button {
		padding: 0;
		white-space: nowrap;
		font-size: 1em;
		font-family: "Segoe UI", sans-serif;
		border-radius: 4px;
		border: 1px solid var(--d3c-color-border);
		background-color: var(--d3c-color-background);
		color: var(--d3c-color-text);
		user-select: none;
		min-width: 2em;
		height: 2em;
	}

	.d3c-1684167638 button:hover {
		background-color: var(--d3c-color-hovered);
	}

	.d3c-1684167638 button:active {
		background-color: var(--d3c-color-clicked);
	}
</style>

<script type="application/x-go">
	import (
		"git.d3nexus.de/Dadido3/D3vugu-components/icons"
		"git.d3nexus.de/Dadido3/D3vugu-components/utils"
	)
</script>