svelte-notifications
svelte-notifications copied to clipboard
Notification Positioning
Any plans to add positioning functionality to the component?
I know this involves a bit of work to setup containers for each corner of the window, but it would be nice to be able to use the notify
function to add a position property.
Hopefully I can fork this when I wrap up a big project in the Spring, and maybe submit a pull request if "beyonk" hasn't had a chance to work on this.
// possible implementations
notifier({
type: 'info',
message: 'A top left positioned toast.',
position: 'top-left',
})
notifier.success('A bottom left positioned toast.', {
position: 'bottom-left',
timeout: 3500,
})
With frameworks like Vue.js, you can put a CSS class directly on the component and it gets passed down to the component's outermost element. Svelte.js does not do this, however, so I cannot simply put the class to override positioning directly on the component, which is a hacky way to quickly add a class to the Toast container.
<!-- not possible with Svelte but works with Vue.js -->
<NotificationDisplay class="toast-top-left"/>
I forgot to provide a quick demo of how I am quickly handling this right now for a prototype I am trying to whip out.
Right after I programmatically call the notifier, I select the container element and add a class name to the element. Obviously, this repositions the container for all active toasts, which is not ideal.
// positioning override
.toast-top-left {
left: 0;
}
.toast-bottom-left {
bottom: 0;
left: 0;
}
// and so on...
notifier.success('Notifications work!', 5000)
const el = document.querySelector('.toasts')
// replace existing overrides
el.className = el.className.replace(/ toast-bottom-right/g, '')
el.className = el.className.replace(/ toast-bottom-left/g, '')
el.className = el.className.replace(/ toast-top-left/g, '')
// add new class override
el.className += ' toast-bottom-left'
Hi @joelhickok - I've not really had need for re-positioning, so I've not done any work to this effect. Also most of the CSS was rewritten by a contributor, so I'm not 100% sure how it works - but it looks like you've figured some of it out!
Happy to accept a PR on this if you get a chance!