トースト Svelte コンポーネント

トーストコンポーネント
トーストのプロパティ
トーストのスロット
例

トーストは、画面上のメッセージを通じて操作に関する簡単なフィードバックを提供します。

トーストコンポーネント

以下のコンポーネントが含まれています

トースト

トーストのプロパティ

名前	型	デフォルト	説明
colors	オブジェクト		Tailwind CSS の色クラスを持つオブジェクト
colors.bgIos	文字列	'bg-black'
colors.bgMaterial	文字列	'bg-md-light-surface-5 dark:bg-md-dark-surface-5'
colors.textIos	文字列	'text-white'
colors.textMaterial	文字列	'text-md-light-primary dark:text-md-dark-primary'
opened	真偽値	false	トーストを開閉し、初期状態を設定できます。
position	'left' \| 'right' \| 'center'	'left'	トーストの位置（ワイドスクリーンのみ）。`left`、`center`、`right`を指定できます。
translucent	真偽値	真	iOSテーマでトーストの背景を半透明にします（`backdrop-filter: blur`を使用）。

トーストのスロット

名前	説明
button	トーストボタンのコンテンツ

例

Toast.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Button,
    Toast,
    Block,
  } from 'konsta/svelte';

  let toastLeftOpened = false;
  let toastCenterOpened = false;
  let toastRightOpened = false;

  const openToast = (setter) => {
    // close other toast
    toastLeftOpened = false;
    toastCenterOpened = false;
    toastRightOpened = false;
    setter();
  };
</script>

<Page>
  <Navbar title="Toast" />

  <Block strongIos outlineIos class="space-y-4">
    <Toast position="left" opened={toastLeftOpened}>
      <Button
        slot="button"
        clear
        inline
        onClick={() => (toastLeftOpened = false)}
      >
        Close
      </Button>
      <div class="shrink">Hello this is left toast!</div>
    </Toast>
    <Toast position="center" opened={toastCenterOpened}>
      <Button
        slot="button"
        clear
        inline
        onClick={() => (toastCenterOpened = false)}
      >
        Close
      </Button>
      <div class="shrink">Hello this is center toast!</div>
    </Toast>
    <Toast position="right" opened={toastRightOpened}>
      <Button
        slot="button"
        clear
        inline
        onClick={() => (toastRightOpened = false)}
      >
        Close
      </Button>
      <div class="shrink">Hello this is right toast!</div>
    </Toast>
    <p>
      Toasts provide brief feedback about an operation through a message on the
      screen.
    </p>
    <p>
      <Button onClick={() => openToast(() => (toastLeftOpened = true))}>
        Toast on Left
      </Button>
    </p>
    <p>
      <Button onClick={() => openToast(() => (toastCenterOpened = true))}>
        Toast on Center
      </Button>
    </p>
    <p>
      <Button onClick={() => openToast(() => (toastRightOpened = true))}>
        Toast on Right
      </Button>
    </p>
  </Block>
</Page>