# svelma-pro
提醒用户的通知

# Notification

## 提醒用户的通知

Codesandbox
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

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

      let isOpen = true
    </script>

    <Button class="block" on:click={() => (isOpen = !isOpen)}>Toggle</Button>
    <Notification bind:active={isOpen}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
      hendrerit imperdiet, elit sapien laoreet elit
    </Notification>

Types

Codesandbox
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

    <script>
      import { Notification } from 'svelma-pro';
    </script>

    <Notification>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
      hendrerit imperdiet, elit sapien laoreet elit
    </Notification>

    <Notification type="is-info">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
      hendrerit imperdiet, elit sapien laoreet elit
    </Notification>

    <Notification type="is-success">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
      hendrerit imperdiet, elit sapien laoreet elit
    </Notification>

    <Notification type="is-warning">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
      hendrerit imperdiet, elit sapien laoreet elit
    </Notification>

    <Notification type="is-danger">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
      hendrerit imperdiet, elit sapien laoreet elit
    </Notification>

Icons

Codesandbox
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

    <script>
      import { Notification } from 'svelma-pro';
    </script>

    <Notification icon="question-circle">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
      hendrerit imperdiet, elit sapien laoreet elit
    </Notification>

    <Notification type="is-info" icon={true}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
      hendrerit imperdiet, elit sapien laoreet elit
    </Notification>

    <Notification type="is-success" icon={true}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
      hendrerit imperdiet, elit sapien laoreet elit
    </Notification>

    <Notification type="is-warning" icon={true}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
      hendrerit imperdiet, elit sapien laoreet elit
    </Notification>

    <Notification type="is-danger" icon={true}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
      hendrerit imperdiet, elit sapien laoreet elit
    </Notification>

Auto-close

Notification will close automatically after `duration` .

Codesandbox

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

      let autoIsOpen = false
    </script>

    <Button class="block" on:click={() => (autoIsOpen = true)}>Show</Button>
    <Notification bind:active={autoIsOpen} autoClose={true}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id
      hendrerit imperdiet, elit sapien laoreet elit
    </Notification>

Opening with code

Codesandbox

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

      function showNotification(props) {
        Notification.create({
          message: 'You opened this programmatically!',
          ...props
        })
      }
    </script>

    <Button class="block" on:click={() => showNotification()}>Show Notification</Button>
    <Button class="block" type="is-success" on:click={() => showNotification({ type: 'is-success' })}>Show Notification (success)</Button>
    <Button class="block" type="is-danger" on:click={() => showNotification({ type: 'is-danger', position: 'is-bottom-right', icon: true })}>Show Notification (danger)</Button>

## API

Name | Description | Type | Values | Default
--- | --- | --- | --- | ---
`type` | Type (color), optional | String | `is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger` | —
`active` | Whether the notification is visible or not | boolean | — | `true`
`showClose` | Display an X button that closes the notification | boolean | — | `true`
`autoClose` | Automatically close the notification after `duration`. Doesn't apply when opening programmatically | boolean | — | `false`
`duration` | Duration notification will remain on screen, optional | Number | — | `2000`
`icon` | Show icon on left-side of the notification. If set to `true`, icon will be determined from `type` property., optional | String, Boolean | — | —
`iconPack` | Fontawesome icon pack to use. By default the `Icon` component uses `fas`, optional | String | ``fas``, ``fab``, `etc...` | —
`ariaCloseLabel` | Label for the close button, to be read by accessibility screenreaders, optional | String | — | —
`message` | Text for notification, when used programmatically | String | — | —
`position` | Where the notification will show on the screen when used programmatically, optional | String | ``is-top``, ``is-bottom``, ``is-top-left``, ``is-top-right``, ``is-bottom-left``, ``is-bottom-right`` | `is-top-right`