svelma-pro

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

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

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 .

<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

<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`