Asked
Viewed10 times
I would like to generate html components (buttons) in my script in js that have svelte tag like on:click :
<button class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click={() => {
managePages(10);
}}
>
10
</button>
But when I display it with {@html button}
it doesn’t matter of the on:click tag…
That’s my code of html generation with svelte tag in js :
for (let i = 1; i <= 3; i++) {
if (i == $trialsPage) {
html += `<button
class="inline-flex cursor-pointer items-center border-t-2 border-mpe-color1 px-4 pt-4 text-sm font-medium text-mpe-color1"
aria-current="page"
on:click="{() => {
managePages(${i});
}}"
>
${i}
</button>`;
} else {
html += `<button
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click="{() => {
managePages(${i});
}}"
>
${i}
</button>`;
}
}
How can I get Svelte to take the tag into account from the string ?
Lokut is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1
{#if nbPages > 0 && nbPages <= 5}
<div class="my-5 flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
<div class="-mt-px flex w-0 flex-1">
<button
class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-mpe-color1 hover:text-mpe-color1"
>
<Icon src="{ArrowCircleLeft}" theme="outline" size="50px" class="mr-3 h-5 w-5" />
Previous
</button>
</div>
<div class="hidden md:-mt-px md:flex">
{#each Array(nbPages) as row, i}
{#if i + 1 == $trialsPage}
<button
class="inline-flex cursor-pointer items-center border-t-2 border-mpe-color1 px-4 pt-4 text-sm font-medium text-mpe-color1"
aria-current="page"
on:click="{() => {
managePages(i + 1);
}}"
>
{i + 1}
</button>
{:else}
<button
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click="{() => {
managePages(i + 1);
}}"
>
{i + 1}
</button>
{/if}
{/each}
</div>
<div class="-mt-px flex w-0 flex-1 justify-end">
<button
class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-mpe-color1 hover:text-mpe-color1"
>
Next
<Icon src="{ArrowCircleRight}" theme="outline" size="50px" class="ml-3 h-5 w-5" />
</button>
</div>
</div>
{:else if nbPages > 0 && nbPages > 5}
<div class="my-5 flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
<div class="-mt-px flex w-0 flex-1">
<button
class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-mpe-color1 hover:text-mpe-color1"
>
<Icon src="{ArrowCircleLeft}" theme="outline" size="50px" class="mr-3 h-5 w-5" />
Previous
</button>
</div>
<div class="hidden md:-mt-px md:flex">
{#each Array(3) as row, i}
{#if i + 1 == $trialsPage}
<button
class="inline-flex cursor-pointer items-center border-t-2 border-mpe-color1 px-4 pt-4 text-sm font-medium text-mpe-color1"
aria-current="page"
on:click="{() => {
managePages(i + 1);
}}"
>
{i + 1}
</button>
{:else}
<button
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click="{() => {
managePages(i + 1);
}}"
>
{i + 1}
</button>
{/if}
{/each}
<span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500">...</span>
<button
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click="{() => {
managePages(nbPages - 2);
}}"
>
{nbPages - 2}
</button>
<button
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click="{() => {
managePages(nbPages - 1);
}}"
>
{nbPages - 1}
</button>
<button
class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
aria-current="page"
on:click="{() => {
managePages(nbPages);
}}"
>
{nbPages}
</button>
</div>
<div class="-mt-px flex w-0 flex-1 justify-end">
<button
class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-mpe-color1 hover:text-mpe-color1"
>
Next
<Icon src="{ArrowCircleRight}" theme="outline" size="50px" class="ml-3 h-5 w-5" />
</button>
</div>
</div>
{/if}
Lokut is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
lang-html