Float

Float 컴포넌트는 부모 안의 특정 위치에 요소를 배치할 때 사용합니다.

사용 가능 버전@seed-design/[email protected], @seed-design/[email protected]

Lynx 예제를 불러오는 중입니다.

import { Box, Float, ContextualFloatingButton } from "@seed-design/lynx-react";

export default function FloatPreview() {
  return (
    <Box
      position="relative"
      width="full"
      maxWidth="480px"
      height="480px"
      borderWidth={1}
      borderColor="stroke.neutralMuted"
    >
      <Float placement="top-start">
        <ContextualFloatingButton>Top Start</ContextualFloatingButton>
      </Float>
      <Float placement="top-center">
        <ContextualFloatingButton>Top Center</ContextualFloatingButton>
      </Float>
      <Float placement="top-end">
        <ContextualFloatingButton>Top End</ContextualFloatingButton>
      </Float>
      <Float placement="middle-start">
        <ContextualFloatingButton>Middle Start</ContextualFloatingButton>
      </Float>
      <Float placement="middle-center">
        <ContextualFloatingButton>Middle Center</ContextualFloatingButton>
      </Float>
      <Float placement="middle-end">
        <ContextualFloatingButton>Middle End</ContextualFloatingButton>
      </Float>
      <Float placement="bottom-start">
        <ContextualFloatingButton>Bottom Start</ContextualFloatingButton>
      </Float>
      <Float placement="bottom-center">
        <ContextualFloatingButton>Bottom Center</ContextualFloatingButton>
      </Float>
      <Float placement="bottom-end">
        <ContextualFloatingButton>Bottom End</ContextualFloatingButton>
      </Float>
    </Box>
  );
}

Installation

npm install @seed-design/lynx-react @seed-design/lynx-css

pnpm add @seed-design/lynx-react @seed-design/lynx-css

yarn add @seed-design/lynx-react @seed-design/lynx-css

bun add @seed-design/lynx-react @seed-design/lynx-css

Usage

import { Float, Text } from "@seed-design/lynx-react";

<view style={{ position: "relative", width: "200px", height: "120px" }}>
  <Float placement="top-end" offsetX="x3" offsetY="x3" zIndex={1}>
    <Text>새 소식</Text>
  </Float>
</view>

Float는 position: relative인 부모를 기준으로 요소를 절대 배치합니다. placement는 세로 top·middle·bottom과 가로 start·center·end를 조합한 9개 값을 받습니다.

offsetX와 offsetY의 기본값은 0입니다. SEED dimension 토큰이나 "12px", "-8px" 같은 길이를 지정할 수 있습니다.

Props

Prop

Type

placement

NonNullable<"top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-center" | "bottom-end" | undefined>

zIndex?number | (string & {}) | undefined

Examples

Offset X

offsetX 속성을 사용하면 좌우 방향으로 위치를 조정할 수 있습니다.

start, center에서는 우측 방향으로 조정되고, end에서는 좌측 방향으로 조정됩니다.

Lynx 예제를 불러오는 중입니다.

import { Box, Float, ContextualFloatingButton } from "@seed-design/lynx-react";

export default function FloatOffsetX() {
  return (
    <Box
      position="relative"
      width="full"
      maxWidth="480px"
      height="480px"
      borderWidth={1}
      borderColor="stroke.neutralMuted"
    >
      <Float placement="middle-start" offsetX="x4">
        <ContextualFloatingButton>Middle Start</ContextualFloatingButton>
      </Float>
      <Float placement="middle-center" offsetX="x4">
        <ContextualFloatingButton>Middle Center</ContextualFloatingButton>
      </Float>
      <Float placement="middle-end" offsetX="x4">
        <ContextualFloatingButton>Middle End</ContextualFloatingButton>
      </Float>
    </Box>
  );
}

Offset Y

offsetY 속성을 사용하면 상하 방향으로 위치를 조정할 수 있습니다.

top, middle에서는 하측 방향으로 조정되고, bottom에서는 상측 방향으로 조정됩니다.

Lynx 예제를 불러오는 중입니다.

import { Box, Float, ContextualFloatingButton } from "@seed-design/lynx-react";

export default function FloatOffsetY() {
  return (
    <Box
      position="relative"
      width="full"
      maxWidth="480px"
      height="480px"
      borderWidth={1}
      borderColor="stroke.neutralMuted"
    >
      <Float placement="top-center" offsetY="x4">
        <ContextualFloatingButton>Top Center</ContextualFloatingButton>
      </Float>
      <Float placement="middle-center" offsetY="x4">
        <ContextualFloatingButton>Middle Center</ContextualFloatingButton>
      </Float>
      <Float placement="bottom-center" offsetY="x4">
        <ContextualFloatingButton>Bottom Center</ContextualFloatingButton>
      </Float>
    </Box>
  );
}

ImageFrameFloater와의 관계

이미지 안에 배지나 버튼을 배치할 때는 ImageFrameFloater를 사용하세요. ImageFrameFloater는 Float를 조합하며, 기존처럼 가장자리 축에는 x1_5, 중앙 축에는 0을 기본 간격으로 적용합니다. 이미지가 Safe Area로 확장되면 안전 영역에 맞춰 위치를 보정합니다.

일반 Float는 Safe Area를 자동 보정하지 않으며 extendSafeAreaX prop도 받지 않습니다. ImageFrame 안에서 사용해도 기본 offset은 0입니다. 화면 끝까지 확장하는 방법과 콘텐츠를 보호하는 기준은 Safe Area 가이드를 참고하세요.

웹 버전과의 차이

as를 지원하지 않으며 네이티브 <view>를 렌더링합니다.
onClick·aria-* 대신 bindtap·accessibility-* 등 Lynx native 속성을 사용합니다.
부모 밖으로 배치한 요소가 잘리면 해당 부모와 조상의 overflow를 확인하고 필요한 곳에 overflow: visible을 지정하세요.

Float

목차