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などを指定します。
編集可能な例
const placements = [ "start-start", "start-center", "start-end", "center-start", "center-center", "center-end", "end-start", "end-center", "end-end", ] as const return ( <Grid w="fit-content" gap="md" p="md" templateColumns="repeat(3, 1fr)"> {placements.map((placement) => ( <GridItem key={placement} 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> ))} </Grid> )
オフセットを変更する
要素の大きさによっては、要素が意図しない位置になる場合があります。その場合は、offsetで調整します。
編集可能な例
<Grid gap="md" p="md" templateColumns="repeat(3, 1fr)"> <GridItem bg={["blackAlpha.50", "whiteAlpha.50"]} boxSize="3xs" position="relative" > <Float offset="md" placement="start-start"> <Center bg="primary" color="white" fontSize="sm" px="1.5" rounded="md"> New </Center> </Float> </GridItem> <GridItem bg={["blackAlpha.50", "whiteAlpha.50"]} boxSize="3xs" position="relative" > <Float offset={["0", "md"]} placement="center-start"> <Center bg="primary" color="white" fontSize="sm" px="1.5" rounded="md"> New </Center> </Float> </GridItem> <GridItem bg={["blackAlpha.50", "whiteAlpha.50"]} boxSize="3xs" position="relative" > <Float offset={["md", "0"]} placement="end-end"> <Center bg="primary" color="white" fontSize="sm" px="1.5" rounded="md"> New </Center> </Float> </GridItem> </Grid>
GitHubでこのページを編集する