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.

類似のコンポーネント

Bleedは、要素をコンテナの境界から外すために使用されるコンポーネントです。

Boxは、他のすべてのコンポーネントがその上に構築される最も抽象的なコンポーネントです。デフォルトでは、div要素をレンダリングします。

Centerは、コンポーネント内の子要素を中央に配置するコンポーネントです。

Containerは、汎用的な区分要素として使用するコンポーネントです。デフォルトでは、section要素をレンダリングします。

Flexは、Boxにflexを設定したコンポーネントです。また、便利なスタイルのショートハンドが用意されています。

Gridは、グリッドレイアウトを管理するためのコンポーネントです。また、便利なスタイルのショートハンドが用意されています。

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

HStackは、子要素を水平方向にスタックするために使用されます。

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

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