당신이 말하는 토스트? 🍞

일반적인 UI 디자인 패턴은 "토스트"또는 사용자에게 실시간으로 일어나는 일(예: 양식 제출 오류, 새 메시지 또는 친구 요청 등)을 알리는 작은 UI 알림을 사용하는 것입니다.

이 기사에서는 Svelte에서 다음과 같은 간단한 토스트 시스템을 구축할 것입니다.



짜증난? 참조 REPL here

토스트 알림을 위한 Svelte 스토어 만들기

토스트 시스템을 위한 간단한 Svelte 스토어를 만드는 것부터 시작하겠습니다. 저장소에는 새 토스트가 생성되거나 "해제"될 때 업데이트할 배열이 포함됩니다.

import { writable } from 'svelte/store'

export const toasts = writable([])

export const dismissToast = (id) => {
  toasts.update((all) => all.filter((t) => t.id !== id))
}

export const addToast = (toast) => {
  // Create a unique ID so we can easily find/remove it
  // if it is dismissible/has a timeout.
  const id = Math.floor(Math.random() * 10000)

  // Setup some sensible defaults for a toast.
  const defaults = {
    id,
    type: 'info',
    dismissible: true,
    timeout: 3000,
  }

  // Push the toast to the top of the list of toasts
  const t = { ...defaults, ...toast }
  toasts.update((all) => [t, ...all])

  // If toast is dismissible, dismiss it after "timeout" amount of time.
  if (t.timeout) setTimeout(() => dismissToast(id), t.timeout)
}

전반적으로 이것은 매우 간단해야 합니다. 두 가지 방법이 있습니다. 하나는 토스트를 추가하는 것이고 다른 하나는 제거하는 것입니다. 토스트에 timeout 필드가 있는 경우 토스트를 제거하기 위해 시간 초과를 설정합니다. 우리는 모든 토스트에 몇 가지 기본값을 설정하고 토스트에 id를 제공하여 더 쉽게 추가/제거하고 Svelte의 태그{#each}가 더 나은 색인을 생성하도록 합니다.

토스트 부모 구성 요소 만들기

<script lang="ts">
  import Toast from './Toast.svelte'

  import { dismissToast, toasts } from './store'
</script>

{#if $toasts}
  <section>
    {#each $toasts as toast (toast.id)}
      <Toast
        type={toast.type}
        dismissible={toast.dismissible}
        on:dismiss={() => dismissToast(toast.id)}>{toast.message}</Toast>
    {/each}
  </section>
{/if}

<style lang="postcss">
  section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    margin-top: 1rem;
    justify-content: center;
    flex-direction: column;
    z-index: 1000;
  }
</style>

토스트 구성 요소 만들기

다음으로 성공, 오류 및 정보와 같은 다양한 상태를 가진 Toast.svelte 구성 요소를 생성합니다.

<script>
  import { createEventDispatcher } from 'svelte'
  import { fade } from 'svelte/transition'
  import SuccessIcon from './SuccessIcon.svelte'
  import ErrorIcon from './ErrorIcon.svelte'
  import InfoIcon from './InfoIcon.svelte'
  import CloseIcon from './CloseIcon.svelte'

  const dispatch = createEventDispatcher()

  export let type = 'error'
  export let dismissible = true
</script>

<article class={type} role="alert" transition:fade>
  {#if type === 'success'}
    <SuccessIcon width="1.1em" />
  {:else if type === 'error'}
    <ErrorIcon width="1.1em" />
  {:else}
    <InfoIcon width="1.1em" />
  {/if}

  <div class="text">
    <slot />
  </div>

  {#if dismissible}
    <button class="close" on:click={() => dispatch('dismiss')}>
      <CloseIcon width="0.8em" />
    </button>
  {/if}
</article>

<style lang="postcss">
  article {
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    margin: 0 auto 0.5rem auto;
    width: 20rem;
  }
  .error {
    background: IndianRed;
  }
  .success {
    background: MediumSeaGreen;
  }
  .info {
    background: SkyBlue;
  }
  .text {
    margin-left: 1rem;
  }
  button {
    color: white;
    background: transparent;
    border: 0 none;
    padding: 0;
    margin: 0 0 0 auto;
    line-height: 1;
    font-size: 1rem;
  }
</style>

바라건대 이 구성 요소는 매우 간단합니다. 축배를 위한 일부 스타일일 뿐이며 "해제 가능"하고 아이콘 구성 요소(SVG일 뿐임)가 오는 경우에 대한 몇 가지 조건입니다.

토스트 알림 만들기

이제 Svelte 앱(JS 파일 또는 .svelte 파일)의 어느 곳에서나 토스트 알림을 만들 수 있습니다.

import { addToast } from "./store";

addToast({
  message: "Hello, World!",
  type: "success",
  dismissible: true,
  timeout: 3000,
});

그런 다음 레이아웃 구성 요소의 어딘가에서 <Toasts /> 구성 요소를 사용할 수 있습니다(예: App.svelte 또는 _layout.svelte 등).

마무리 🌯

그게 다야 여러분, 오늘 뭔가를 배우기를 바랍니다!

Svelte REPL here에서 전체 토스트 시스템을 참조하십시오.

읽어 주셔서 감사합니다!


읽어 주셔서 감사합니다! 이 게시물에 ❤️, 🦄 또는 🔖를 지정하여 나중에 북마크할 수 있습니다. 💕

다른 팁, 아이디어, 피드백 또는 수정 사항이 있습니까? 댓글로 알려주세요! 🙋‍♂️

Dev.to( ), Twitter( ) 및/또는 Github(danawoodman )에서 저를 팔로우하는 것을 잊지 마세요!

사진 제공: Joshua Aragon on Unsplash