A an example app which attempts to create a Material-like theme using SvelteKit and Skeleton UI.
This site demo has been deployed to GitHub pages.
The theme is configured in two files:
- material.ts <- The main theme file for Skeleton
- app.postcss <- Contains some extra styles & CSS corrections
The svelte-ripple-action NPM package was installed to implement the material ripple.
npm install svelte-ripple-actionTo add a Ripple effect to a DOM element, you can use the use:ripple Svelte action.
e.g.
<button class="btn variant-filled-primary" use:ripple>primary</button>Note
The default color of the ripple is set to the text color.
You can set the ripple color either using CSS, Tailwind class, or using the Svelte action arguments.
Warning
The ripple effect action cannot be added to child elements of pre-built components because the elements (i.e. buttons) are not exposed to the developer and use:ripple cannot be added.
If you wish to add ripple effects to child elements of pre-built components (modals, paginators, steppers, etc) - you need to configure JavaScript, as described below.
If you want the ripple effect to be configured globally (or for chidren of a DOM element), without needing to use use:ripple, you can consider adding JavaScript to apply the ripple effect to all elements with specific classes.
This can allow buttons inside of pre-built components (modals, toasts, stepper-form, etc) to have ripple effects.
For example, below is a Svelte action which you can place in +layout.svelte to automatically add ripple effects to all elements with the btn or btn-icon class:
/**
* Every 100ms, add ripple effect to all .btn, .btn-icon class elements
* if they do not already have a ripple effect configured.
*/
function rippleBtnClass(e: Element) {
setInterval(() => {
const btns = e.querySelectorAll('.btn, .btn-icon');
btns.forEach((el) => {
if (!el.classList.contains('ripple-effect')) {
ripple(el as HTMLElement);
}
});
}, 100);
}Usage:
<svelte:body use:rippleBtnClass />