# svelma-pro
吐司

# Toast

## 吐司

Codesandbox

    <script>
      import { Button, Toast } from 'svelma-pro'

      function open(type, position) {
        Toast.create({ message: 'I am a toast', type, position })
      }
    </script>

    <Button on:click={() => open()}>Toast</Button>
    <Button type="is-success" on:click={() => open('is-success')}>Success</Button>
    <Button type="is-danger" on:click={() => open('is-danger', 'is-bottom-right')}>Bottom Right</Button>
    <Button type="is-primary" on:click={() => open('is-primary', 'is-top', 'has-background-grey-lighter')}>Custom Background</Button>

## API

Name | Description | Type | Values | Default
--- | --- | --- | --- | ---
`message` | Text or html message for toast | String | — | —
`duration` | Duration toast will remain on screen, optional | Number | — | `2000`
`position` | Where the toast will show on the screen, optional | String | ``is-top``, ``is-bottom``, ``is-top-left``, ``is-top-right``, ``is-bottom-left``, ``is-bottom-right`` | `is-top`
`type` | Type (color), optional | String | `is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger` | `is-dark`
`background` | Background type (any of the Bulma `has-background-` classes will work), optional | String | ``has-background-*`` | —