Show
Showは、条件に基づいて子要素を表示または非表示にするコンポーネントです。
インビジブルガール 葉隠透
<Show when={true}>
<Text>インビジブルガール 葉隠透</Text>
</Show>
使い方
import { Show } from "@yamada-ui/react"
import { Show } from "@/components/ui"
import { Show } from "@workspaces/ui"
<Show />
条件付きでレンダリングする
コンテンツを条件付きでレンダリングする場合は、whenに真偽値を設定します。
インビジブルガール 葉隠透
const [isVisible, setIsVisible] = useState(true)
return (
<VStack>
<Button onClick={() => setIsVisible((prev) => !prev)}>
{isVisible ? "Hide" : "Show"} Content
</Button>
<Show when={isVisible}>
<Text>インビジブルガール 葉隠透</Text>
</Show>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。フォールバックを使う
フォールバックを使う場合は、fallbackにReactNodeを設定します。
衣服
const [isVisible, setIsVisible] = useState(false)
return (
<VStack>
<Button onClick={() => setIsVisible((prev) => !prev)}>
Toggle Content
</Button>
<Show when={isVisible} fallback={<Text color="gray.500">衣服</Text>}>
<Text color="green.500">インビジブルガール 葉隠透</Text>
</Show>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。