Float
Floatは、要素をコンテナの端に固定するために使用されるコンポーネントです。
New
<Box bg="bg.panel" boxSize="3xs" position="relative" m="lg">
<Float
bg="bg.contrast"
color="fg.contrast"
fontSize="sm"
px="1.5"
rounded="l1"
>
New
</Float>
</Box>
使い方
import { Float } from "@yamada-ui/react"
import { Float } from "@/components/ui"
import { Float } from "@workspaces/ui"
<Float />
表示位置を変更する
表示位置を変更する場合は、placementにstart-startやend-centerなどを指定します。
New
New
New
New
New
New
New
New
New
const placements = [
"start-start",
"start-center",
"start-end",
"center-start",
"center-center",
"center-end",
"end-start",
"end-center",
"end-end",
] as const
return (
<Grid p="lg" gap="lg" templateColumns="repeat(3, 1fr)">
{placements.map((placement) => (
<GridItem
key={placement}
bg="bg.panel"
aspectRatio="1"
position="relative"
>
<Float
bg="bg.contrast"
color="fg.contrast"
fontSize="sm"
placement={placement}
px="1.5"
rounded="l2"
>
New
</Float>
</GridItem>
))}
</Grid>
)
オフセットを変更する
要素の大きさによっては、要素が意図しない位置になる場合があります。その場合は、offsetで調整します。
New
New
New
<Grid p="lg" gap="lg" templateColumns="repeat(3, 1fr)">
<GridItem bg="bg.panel" aspectRatio="1" position="relative">
<Float
bg="bg.contrast"
color="fg.contrast"
fontSize="sm"
offset="md"
placement="start-start"
px="1.5"
rounded="l2"
>
New
</Float>
</GridItem>
<GridItem bg="bg.panel" aspectRatio="1" position="relative">
<Float
bg="bg.contrast"
color="fg.contrast"
fontSize="sm"
offset={["0", "md"]}
placement="center-start"
px="1.5"
rounded="l2"
>
New
</Float>
</GridItem>
<GridItem bg="bg.panel" aspectRatio="1" position="relative">
<Float
bg="bg.contrast"
color="fg.contrast"
fontSize="sm"
offset={["md", "0"]}
placement="end-end"
px="1.5"
rounded="l2"
>
New
</Float>
</GridItem>
</Grid>