Toast Reactコンポーネント

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

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

トーストコンポーネント

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

トースト

トーストのプロパティ

名前	タイプ	デフォルト	説明
button	ReactNode		トーストボタンの内容
colors	object		Tailwind CSSのカラークラスを持つオブジェクト
colors.bgIos	string	'bg-black'
colors.bgMaterial	string	'bg-md-light-surface-5 dark:bg-md-dark-surface-5'
colors.textIos	string	'text-white'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
component	string	'div'	コンポーネントのHTML要素
opened	boolean	false	トーストを開閉し、初期状態を設定できます
position	'left' \| 'right' \| 'center'	'left'	トーストの位置（ワイドスクリーンのみ）。`left`、`center`、または`right`が指定できます。
translucent	boolean	true	iOSテーマでトーストの背景を半透明にします（`backdrop-filter: blur`を使用）。

例

Toast.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Button,
  Toast,
  Block,
} from 'konsta/react';

export default function ToastPage() {
  const [toastLeftOpened, setToastLeftOpened] = useState(false);
  const [toastCenterOpened, setToastCenterOpened] = useState(false);
  const [toastRightOpened, setToastRightOpened] = useState(false);

  const openToast = (setter) => {
    // close other toast
    setToastLeftOpened(false);
    setToastCenterOpened(false);
    setToastRightOpened(false);
    setter(true);
  };
  return (
    <Page>
      <Navbar
        title="Toast"
        />

      <Block strongIos outlineIos className="space-y-4">
        <Toast
          position="left"
          opened={toastLeftOpened}
          button={
            <Button
              rounded
              clear
              small
              inline
              onClick={() => setToastLeftOpened(false)}
            >
              Close
            </Button>
          }
        >
          <div className="shrink">Hello this is left toast!</div>
        </Toast>
        <Toast
          position="center"
          opened={toastCenterOpened}
          button={
            <Button
              rounded
              clear
              small
              inline
              onClick={() => setToastCenterOpened(false)}
            >
              Close
            </Button>
          }
        >
          <div className="shrink">Hello this is center toast!</div>
        </Toast>
        <Toast
          position="right"
          opened={toastRightOpened}
          button={
            <Button
              rounded
              clear
              small
              inline
              onClick={() => setToastRightOpened(false)}
            >
              Close
            </Button>
          }
        >
          <div className="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(setToastLeftOpened)}>
            Toast on Left
          </Button>
        </p>
        <p>
          <Button onClick={() => openToast(setToastCenterOpened)}>
            Toast on Center
          </Button>
        </p>
        <p>
          <Button onClick={() => openToast(setToastRightOpened)}>
            Toast on Right
          </Button>
        </p>
      </Block>
    </Page>
  );
}