Notification

Add in root

Take projects use SvelteKit for example:

/src/routes/+layout.svelte

<CNotification /> 
<slot />

<CNotification /> 
<slot />

svelte

Only Once

Please make sure CNotification component only used once in whole application.

Basic usage

<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'
</script>

<CButton
  label="Open notification"
  on:click={() => openNotification({
    title: 'Hi, there',
    message: 'You\'ve got a new notification',
  })}
/>

<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'
</script>

<CButton
  label="Open notification"
  on:click={() => openNotification({
    title: 'Hi, there',
    message: 'You\'ve got a new notification',
  })}
/>

svelte

Themes

<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'

  function openWithTheme(
    theme: 'primary' | 'secondary' | 'warning' | 'negative' = 'primary'
  ) {
    openNotification({
      title: 'Hi, there',
      message: 'You\'ve got a new notification',
      theme,
    })
  }
</script>

<CButton label="Primary (default)" on:click={() => openWithTheme()} />

<CButton
  label="Secondary"
  theme="secondary"
  on:click={() => openWithTheme('secondary')}
/>
<CButton
  label="Warning"
  theme="warning"
  on:click={() => openWithTheme('warning')}
/>
<CButton
  label="Negative"
  theme="negative"
  on:click={() => openWithTheme('negative')}
/>

<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'

  function openWithTheme(
    theme: 'primary' | 'secondary' | 'warning' | 'negative' = 'primary'
  ) {
    openNotification({
      title: 'Hi, there',
      message: 'You\'ve got a new notification',
      theme,
    })
  }
</script>

<CButton label="Primary (default)" on:click={() => openWithTheme()} />

<CButton
  label="Secondary"
  theme="secondary"
  on:click={() => openWithTheme('secondary')}
/>
<CButton
  label="Warning"
  theme="warning"
  on:click={() => openWithTheme('warning')}
/>
<CButton
  label="Negative"
  theme="negative"
  on:click={() => openWithTheme('negative')}
/>

svelte

Positions

<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'

  function openWithPosition(alignX: any, alignY: any) {
    openNotification({
      title: 'Hi, there',
      message: 'You\'ve got a new notification',
      alignX,
      alignY,
    })
  }
</script>

<div class="grid grid-cols-3 gap-4">
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('start', 'start')}
  >
    <div class="i-ph-arrow-circle-up-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('center', 'start')}
  >
    <div class="i-ph-arrow-circle-up" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('end', 'start')}
  >
    <div class="i-ph-arrow-circle-up-right" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('start', 'center')}
  >
    <div class="i-ph-arrow-circle-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('center', 'center')}
  >
    <div class="i-cil-center-focus" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('end', 'center')}
  >
    <div class="i-ph-arrow-circle-right" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('start', 'end')}
  >
    <div class="i-ph-arrow-circle-down-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('center', 'end')}
  >
    <div class="i-ph-arrow-circle-down" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('end', 'end')}
  >
    <div class="i-ph-arrow-circle-down-right" />
  </CButton>
</div>

<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'

  function openWithPosition(alignX: any, alignY: any) {
    openNotification({
      title: 'Hi, there',
      message: 'You\'ve got a new notification',
      alignX,
      alignY,
    })
  }
</script>

<div class="grid grid-cols-3 gap-4">
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('start', 'start')}
  >
    <div class="i-ph-arrow-circle-up-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('center', 'start')}
  >
    <div class="i-ph-arrow-circle-up" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('end', 'start')}
  >
    <div class="i-ph-arrow-circle-up-right" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('start', 'center')}
  >
    <div class="i-ph-arrow-circle-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('center', 'center')}
  >
    <div class="i-cil-center-focus" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('end', 'center')}
  >
    <div class="i-ph-arrow-circle-right" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('start', 'end')}
  >
    <div class="i-ph-arrow-circle-down-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('center', 'end')}
  >
    <div class="i-ph-arrow-circle-down" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('end', 'end')}
  >
    <div class="i-ph-arrow-circle-down-right" />
  </CButton>
</div>

svelte

No auto closing

Set timeout to 0 to disable auto closing

<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'
</script>

<CButton
  label="Click to open notification"
  on:click={() =>
    openNotification({
      title: 'Hi, there',
      message: 'This is a notification without auto closing',
      timeout: 0,
    })}
/>

<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'
</script>

<CButton
  label="Click to open notification"
  on:click={() =>
    openNotification({
      title: 'Hi, there',
      message: 'This is a notification without auto closing',
      timeout: 0,
    })}
/>

svelte

Without close icon

set closeIcon to false to manually close notification.

<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'

  let closeNotification: (() => void) | null

  const onClick = () => {
    if (!closeNotification) {
      const { close } = openNotification({
        title: 'Hi, there',
        message: 'This is a notification withuot close icon',
        closeIcon: false,
        timeout: 0,
      })
      closeNotification = close
    } else {
      closeNotification()
      closeNotification = null
    }
  }
</script>

<CButton
  theme={closeNotification ? 'negative' : 'primary'}
  label={`Click to ${closeNotification ? 'close' : 'open'} notification`}
  on:click={onClick}
/>

<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'

  let closeNotification: (() => void) | null

  const onClick = () => {
    if (!closeNotification) {
      const { close } = openNotification({
        title: 'Hi, there',
        message: 'This is a notification withuot close icon',
        closeIcon: false,
        timeout: 0,
      })
      closeNotification = close
    } else {
      closeNotification()
      closeNotification = null
    }
  }
</script>

<CButton
  theme={closeNotification ? 'negative' : 'primary'}
  label={`Click to ${closeNotification ? 'close' : 'open'} notification`}
  on:click={onClick}
/>

svelte

Dynamic content

<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'

  const onClick = () => {
    const { changeContent } = openNotification({
      title: 'Hi, there',
      message: 'You\'ve got a new notification',
      timeout: 6500,
    })
    setTimeout(() => {
      changeContent({
        title: 'Hi, there',
        message: 'Message changed!',
        theme: 'secondary',
      })
    }, 2000)

    setTimeout(() => {
      changeContent({
        title: 'Hi, there',
        message: 'Message changed again!',
        theme: 'warning',
      })
    }, 4000)

    setTimeout(() => {
      changeContent({
        title: 'Hi, there',
        message: 'About to close notification',
        theme: 'negative',
      })
    }, 6000)
  }
</script>

<CButton label="Click to open notification" on:click={onClick} />

<script lang="ts">
  import { openNotification } from '@casual-ui/svelte'

  const onClick = () => {
    const { changeContent } = openNotification({
      title: 'Hi, there',
      message: 'You\'ve got a new notification',
      timeout: 6500,
    })
    setTimeout(() => {
      changeContent({
        title: 'Hi, there',
        message: 'Message changed!',
        theme: 'secondary',
      })
    }, 2000)

    setTimeout(() => {
      changeContent({
        title: 'Hi, there',
        message: 'Message changed again!',
        theme: 'warning',
      })
    }, 4000)

    setTimeout(() => {
      changeContent({
        title: 'Hi, there',
        message: 'About to close notification',
        theme: 'negative',
      })
    }, 6000)
  }
</script>

<CButton label="Click to open notification" on:click={onClick} />

svelte

CNotification Props

No data

CNotification Events

No data

CNotification Slots

item

Customize the content of each notification item

Bindings:
- itemInfo any
  
  all the item's props will be passed to this slot.
  For example: message, title, theme, timeout

CNotification Exports

No data

Suggest changes to this page

Last update at: 2023/08/13 05:48:19

On this page

Add in root Basic usage Themes Positions No auto closing Without close icon Dynamic content CNotification Props CNotification Events CNotification Slots CNotification Exports