Snacks
Snacksは、フォームなどで使用される通知を制御するコンポーネントです。
const { snack, snacks } = useSnacks()
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
snack({
description: "こいつ、動くぞ！",
title: "アムロ・レイ",
})
}}
>
Add Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。使い方
import { useSnacks, Snacks } from "@yamada-ui/react"
import { useSnacks, Snacks } from "@/components/ui"
import { useSnacks, Snacks } from "@workspaces/ui"
<Snacks />
バリアントを変更する
const { snack, snacks } = useSnacks()
return (
<VStack>
<Wrap gap="md">
<For each={["plain", "solid", "subtle", "surface", "island"]}>
{(variant) => (
<Button
key={variant}
onClick={() => {
snack({
variant,
description: "美しいものが、嫌いな人がいるのかしら？",
title: "ララァ・スン",
withIcon: variant !== "island" ? true : false,
})
}}
>
Add "{toTitleCase(variant)}" Snack
</Button>
)}
</For>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。カラースキー厶を変更する
const { snack, snacks } = useSnacks()
return (
<VStack>
<Wrap gap="md">
<For each={["success", "warning"]}>
{(colorScheme) => (
<Button
key={colorScheme}
onClick={() => {
snack({
colorScheme,
description:
"見せて貰おうか。連邦軍のモビルスーツの性能とやらを！",
title: "シャア・アズナブル",
})
}}
>
Add "{toTitleCase(colorScheme)}" Snack
</Button>
)}
</For>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。ステータスを変更する
ステータスを変更する場合は、statusを設定します。
const { snack, snacks } = useSnacks()
return (
<VStack>
<Wrap gap="md">
<For each={["info", "success", "warning", "error"]}>
{(status) => (
<Button
key={status}
onClick={() => {
snack({
description: "アムロ、行きまーす！",
status,
title: "アムロ・レイ",
})
}}
>
Add "{toTitleCase(status)}" Snack
</Button>
)}
</For>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。ローディングスキームを変更する
ローディングスキームを変更する場合は、loadingSchemeを設定します。
const { snack, snacks } = useSnacks()
return (
<VStack>
<Wrap gap="md">
<For each={["oval", "grid", "puff", "dots"]}>
{(loadingScheme) => (
<Button
key={loadingScheme}
onClick={() => {
snack({
description: "大丈夫、あなたなら出来るわ。",
loadingScheme,
title: "セイラ・マス",
})
}}
>
Add "{toTitleCase(loadingScheme)}" Snack
</Button>
)}
</For>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。方向を変更する
方向を変更する場合は、directionに"start"または"end"を設定します。デフォルトでは、"start"が設定されています。
const { snack, snacks } = useSnacks({ direction: "end" })
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
snack({
description:
"認めたくないものだな。自分自身の、若さゆえの過ちというものを。",
title: "シャア・アズナブル",
})
}}
>
Add Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。表示件数を制限する
表示件数を制限する場合は、limitに数値を設定します。もし、無制限に表示する場合は、nullを設定します。デフォルトでは、3が設定されています。
const { snack, snacks } = useSnacks({ limit: 5 })
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
snack({
description: "殴られもせずに一人前になった奴がどこにいるものか！",
title: "ブライト・ノア",
})
}}
>
Add Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。表示時間を設定する
表示時間を設定する場合は、durationに数値(ミリ秒)を設定します。
const { snack, snacks } = useSnacks()
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
snack({
description: "それでも男ですか！軟弱者！",
duration: 30000,
title: "セイラ・マス",
})
}}
>
Add Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。閉じるボタンを無効にする
閉じるボタンを無効にする場合は、closableをfalseに設定します。
const { snack, snacks } = useSnacks({ closable: false })
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
snack({
description: "ザクとは違うのだよ、ザクとは！",
title: "ランバ・ラル",
})
}}
>
Add Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。通知を閉じる
通知を閉じる場合は、snack.closeやsnack.closeAllを使用します。
const { snack, snacks } = useSnacks()
const id = useRef<string | undefined>(undefined)
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
id.current = snack({
description: "オレは、生きる！生きて、アイナと添い遂げる！",
title: "シロー・アマダ",
})
}}
>
Add Snack
</Button>
<Button
colorScheme="warning"
onClick={() => {
if (id.current) snack.close(id.current)
}}
>
Close last Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。通知を更新する
通知を更新する場合は、snack.updateを使用します。
const { snack, snacks } = useSnacks()
const id = useRef<string | undefined>(undefined)
return (
<VStack>
<Wrap gap="md">
<Button
onClick={() => {
id.current = snack({
description:
"今の私は、クワトロ・バジーナ大尉だ。それ以上でも、それ以下でもない。",
title: "クワトロ・バジーナ",
})
}}
>
Add Snack
</Button>
<Button
colorScheme="warning"
onClick={() => {
if (id.current)
snack.update(id.current, {
colorScheme: "purple",
description: "そんな大人、修正してやる！",
title: "カミーユ・ビダン",
})
}}
>
Update last Snack
</Button>
<Button colorScheme="danger" onClick={snack.closeAll}>
Close all Snack
</Button>
</Wrap>
<Snacks snacks={snacks} />
<Input placeholder="Input" />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。