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

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

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

Props

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`offset`	-	`"-0.5" \| "-1.5" \| "-1" \| "-10" \| "-11" \| "-12" \| "-13" \| "-14" \| "-15" \| "-16" ...` Changes position offset.

類似のコンポーネント

ZStackは、子要素を奥行き方向にスタックするために使用されます。

VStackは、子要素を垂直方向にスタックするために使用されます。

Wrapは、Flexにwrapを設定したコンポーネントです。Flexから便利なスタイルのショートハンドを継承しています。

Stackは、要素をグループ化し、子要素間にスペースを設けるコンポーネントです。

Spacerは、要素間に空間を追加するために使用するコンポーネントです。

SimpleGridは、Gridをより使いやすくシンプルにしたコンポーネントです。

Separatorは、要素間において区切りを表すコンポーネントです。

Groupは、複数の要素をまとめて扱うためのコンポーネントです。

使用されているコンポーネント・フック

Indicatorは、アバターなどの要素の隅に表示するコンポーネントです。