Float
Floatは、要素をコンテナの端に固定するために使用されるコンポーネントです。
インポート
import { Float } from "@yamada-ui/react"
使い方
編集可能な例
<Box bg={["blackAlpha.50", "whiteAlpha.50"]} boxSize="3xs" position="relative"> <Float> <Center bg="primary" color="white" fontSize="sm" px="1.5" rounded="md"> New </Center> </Float> </Box>
表示位置を変更する
表示位置を変更する場合は、placementにstart-startやend-centerなどを指定します。
編集可能な例
return ( <Grid gap="md" p="md" templateColumns="repeat(3, 1fr)"> <For each={[ "start-start", "start-center", "start-end", "center-start", "center-center", "center-end", "end-start", "end-center", "end-end", ]} > {(placement, index) => ( <GridItem key={index} bg={["blackAlpha.50", "whiteAlpha.50"]} boxSize="3xs" position="relative" > <Float placement={placement}> <Center bg="primary" color="white" fontSize="sm" px="1.5" rounded="md" > New </Center> </Float> </GridItem> )} </For> </Grid> )
オフセットを変更する
要素の大きさによっては、要素が意図しない位置になる場合があります。その場合は、offsetで調整します。
編集可能な例
<Grid gap="md" p="md" templateColumns="repeat(3, 1fr)"> <For each={[ { placement: "start-start", offset: "md" }, { placement: "center-start", offset: ["0", "md"] }, { placement: "end-end", offset: ["md", "0"] }, ]} > {({ placement, offset }, index) => ( <GridItem bg={["blackAlpha.50", "whiteAlpha.50"]} boxSize="3xs" position="relative" > <Float key={index} offset={variant.offset} placement={variant.placement} > <Center bg="primary" color="white" fontSize="sm" px="1.5" rounded="md" > New </Center> </Float> </GridItem> )} </For> </Grid>
GitHubでこのページを編集する