Slide
Slideは、要素をページの隅から表示または非表示にするコンポーネントです。
インポート
import { Slide } from "@yamada-ui/react"
使い方
表示または非表示を制御するために、isOpenを設定します。
編集可能な例
const { isOpen, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <Slide isOpen={isOpen} placement="bottom"> <VStack w="full" bg="orange.500" p="md"> <Text color="white"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Text> <Button onClick={onToggle} alignSelf="flex-end"> Close </Button> </VStack> </Slide> </> )
所要時間を変更する
所要時間を変更する場合は、durationに数値(秒)を設定します。
編集可能な例
const { isOpen, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <Slide isOpen={isOpen} placement="bottom" duration={0.7}> <VStack w="full" bg="orange.500" p="md"> <Text color="white"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Text> <Button onClick={onToggle} alignSelf="flex-end"> Close </Button> </VStack> </Slide> </> )
表示位置を変更する
所要時間を変更する場合は、placementにtop, right, bottom, leftを設定します。デフォルトでは、rightが設定されています。
編集可能な例
const { isOpen, onToggle } = useDisclosure() return ( <> <Button onClick={onToggle}>Please Click</Button> <Slide isOpen={isOpen} placement="left" zIndex="sonGoku"> <VStack w="full" bg="orange.500" p="md"> <Text color="white"> クリリンのことか……クリリンのことかーーーっ！！！！！ </Text> <Button onClick={onToggle} alignSelf="flex-end"> Close </Button> </VStack> </Slide> </> )
GitHubでこのページを編集する