search

andrewjk / svelte-toolkit

UI components for Svelte
MIT License
36 stars 2 forks source link

Alert example. #1

Open sinistra opened 5 years ago

sinistra commented 5 years ago

Could you please provide an example of using Alert?

I am using the following code...

` import { Alert } from "svelte-toolkit"; function saveEdit(event) { page = null; site = event.detail; showAlert({ type: 'success', content: 'Record saved.', position: 'top-right', closable: true, duration: 5000}); }

function showAlert(props) { const alert = new Alert({ target: document.body, props, intro: true }); }`

I get a large white window opening and the text 'Record saved.' appearing in black outside the new window. What am I doing wrong?

andrewjk commented 5 years ago

Hi sinistra, you might need to import the CSS to make everything look correct. If you're using Sapper, you can add the line import 'svelte-toolkit/main.scss' in client.js.

There's some basic documentation at https://andrewjk.github.io/svelte-toolkit-docs/components/alert. It shows a slightly different way of doing things, using import { showAlert } from "svelte-toolkit" and then calling that method. The way you've done things should also work though.