Show
Show is a component that shows or hides its children based on a condition.
インビジブルガール 葉隠透
<Show when={true}>
<Text>インビジブルガール 葉隠透</Text>
</Show>
Usage
import { Show } from "@yamada-ui/react"
import { Show } from "@/components/ui"
import { Show } from "@workspaces/ui"
<Show />
Render Conditionally
To conditionally render content, set the when prop to a boolean value.
インビジブルガール 葉隠透
const [isVisible, setIsVisible] = useState(true)
return (
<VStack>
<Button onClick={() => setIsVisible((prev) => !prev)}>
{isVisible ? "Hide" : "Show"} Content
</Button>
<Show when={isVisible}>
<Text>インビジブルガール 葉隠透</Text>
</Show>
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.With Fallback
To render fallback content when the condition is false, use the fallback prop.
衣服
const [isVisible, setIsVisible] = useState(false)
return (
<VStack>
<Button onClick={() => setIsVisible(!isVisible)}>Toggle Content</Button>
<Show when={isVisible} fallback={<Text color="gray.500">衣服</Text>}>
<Text color="green.500">インビジブルガール 葉隠透</Text>
</Show>
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.