Float

Float (플로트)

컨테이너의 가장자리에 요소를 고정할 때 사용하는 컴포넌트예요. 배지나 알림 표시처럼 특정 위치에 요소를 붙여놓고 싶을 때 유용해요.

출처: 문서

Float는 position: relative 스타일이 적용된 부모 요소가 필요해요.

import { Box, Float } from "@chakra-ui/react"

<Box position="relative">
  <Float>
    <div />
  </Float>
</Box>

placement prop을 사용해서 컨테이너의 가장자리를 따라 요소를 배치할 수 있어요.

| 예제 (float-with-placements) |

offsetX prop을 사용해서 x축을 따라 요소를 오프셋할 수 있어요.

| 예제 (float-with-offset-x) |

offsetY prop을 사용해서 y축을 따라 요소를 오프셋할 수 있어요.

| 예제 (float-with-offset-y) |

offset prop을 사용해서 두 축을 따라 요소를 오프셋할 수 있어요.

| 예제 (float-with-offset) |

Float 컴포넌트를 Avatar 컴포넌트와 조합하는 예시예요.

| 예제 (float-with-avatar) |

| PropTable (Float / Float) |