# svelma-pro
比提示轻量,比吐司重要的提醒框

# Snackbar

## 比提示轻量,比吐司重要的提醒框

Codesandbox

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

      function open(props) {
        Snackbar.create({ message: 'I am a snackbar message', ...props })
      }
    </script>

    <div class="buttons">
      <Button on:click={() => open()}>Default Snackbar</Button>
      <Button type="is-success" on:click={() => open({ type: 'is-success' })}>Success</Button>
      <Button type="is-danger" on:click={() => open({ type: 'is-danger', actionText: 'retry', position: 'is-top-right' })}>Top Right</Button>
      <Button type="is-primary" on:click={() => open({ background: 'has-background-grey-lighter' })}>Custom Background</Button>
    </div>

## API

Name | Description | Type | Values | Default
--- | --- | --- | --- | ---
`message` | Text or html message for snackbar | String | — | —
`duration` | Duration snackbar will remain on screen, optional | Number | — | `3500`
`position` | Where the snackbar will show on the screen, optional | String | ``is-top``, ``is-bottom``, ``is-top-left``, ``is-top-right``, ``is-bottom-left``, ``is-bottom-right`` | `is-bottom-right`
`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-*`` | —