Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

minor improvement: css-classes on Components #14

Closed
michapixel opened this issue Feb 18, 2023 · 4 comments
Closed

minor improvement: css-classes on Components #14

michapixel opened this issue Feb 18, 2023 · 4 comments

Comments

@michapixel
Copy link

eg. the Pagination Component has no class whatsoever.
Would be cool if Components could be written in this way too:

<Pagination 
   class="dt_pagination"
   handler={ dataTable }  
/>

Inside of the Component it can be done in this way:

<section class="{ if $$props.class !== undefined ? $$props.class : '' }">

Don't know if this is the official way, but i found it on the webs and it was very useful for me.

@michapixel
Copy link
Author

urghs the "if" will trigger an error, just delete it.

@vincjo
Copy link
Owner

vincjo commented Feb 20, 2023

I would recommend creating your own paging component
The handler provides all pagination features :

const pages = handler.getPages({ ellipsis: true }) 
console.log($pages)

result :

[ 1, 2, 3, 4, 5, null, 24 ]

Svelte template :

{#each $pages as page}
    <button on:click={() => handler.setPage(page)}>
        {page ?? '...'}
    </button>
{/each}

Then you have complete control over styling in a minimal logic imlementation.

That being said, let me know if you still prefer that I implement a class property

@michapixel
Copy link
Author

Ahhh, i just recently updated to the latest version, so i wasn't aware of that approach. That's totally fine with me. <3

@vincjo
Copy link
Owner

vincjo commented Feb 22, 2023

Great
thx for your message
🦆 🦆

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants