Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Float

Floatは、要素をコンテナの端に固定するために使用されるコンポーネントです。

ソース@yamada-ui/layouts

インポート

import { Float } from "@yamada-ui/react"
Copied!

使い方

編集可能な例

<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>
Copied!

表示位置を変更する

表示位置を変更する場合は、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>
)
Copied!

オフセットを変更する

要素の大きさによっては、要素が意図しない位置になる場合があります。その場合は、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>
Copied!

GitHubでこのページを編集する

前Bleed次Divider