로고SEED Design

Float

Float 컴포넌트는 특정 위치에 고정된 요소를 배치할 때 사용합니다.

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

export default function FloatPreview() {
  return (
    <Box
      position="relative"
      width="480px"
      height="480px"
      borderWidth={1}
      borderColor="stroke.neutral"
    >
      <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>
  );
}

Props

PropTypeDefault
shrink?
0 | (number & {})
-
grow?
true | 0 | 1 | (number & {})
-
justify?
"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround"
-
align?
"center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch"
-
wrap?
true | "wrap" | "wrap-reverse" | "nowrap"
-
direction?
"row" | "column" | "row-reverse" | "column-reverse" | "rowReverse" | "columnReverse"
-
unstable_transform?
string
-
gap?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
alignSelf?
"center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch"
-
alignContent?
"center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch"
-
alignItems?
"center" | "flex-start" | "flex-end" | "flexStart" | "flexEnd" | "stretch"
-
justifyContent?
"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround"
-
flexWrap?
"wrap" | "wrap-reverse" | "nowrap"
-
flexShrink?
0 | (number & {})
-
flexGrow?
0 | 1 | (number & {})
-
zIndex?
number | (string & {})
-
overflowY?
"hidden" | "auto" | "visible" | "scroll"
-
overflowX?
"hidden" | "auto" | "visible" | "scroll"
-
position?
"relative" | "absolute" | "fixed" | "sticky"
-
pl?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
paddingLeft?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
pb?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
paddingBottom?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
pr?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
paddingRight?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
pt?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
paddingTop?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
py?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
paddingY?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
px?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
paddingX?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
p?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
padding?
0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
bottom?
0 | (string & {})
-
right?
0 | (string & {})
-
left?
0 | (string & {})
-
top?
0 | (string & {})
-
maxHeight?
(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
minHeight?
(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
height?
(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
maxWidth?
(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
minWidth?
(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
width?
(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"
-
borderBottomLeftRadius?
0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full"
-
borderBottomRightRadius?
0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full"
-
borderTopRightRadius?
0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full"
-
borderTopLeftRadius?
0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full"
-
borderRadius?
0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full"
-
borderLeftWidth?
0 | (string & {}) | 1
-
borderBottomWidth?
0 | (string & {}) | 1
-
borderRightWidth?
0 | (string & {}) | 1
-
borderTopWidth?
0 | (string & {}) | 1
-
borderWidth?
0 | (string & {}) | 1
-
borderColor?
ScopedColorPalette | (string & {}) | ScopedColorStroke
-
bg?
ScopedColorPalette | (string & {}) | ScopedColorBg
-
background?
ScopedColorPalette | (string & {}) | ScopedColorBg
-
as?
ElementType<any, keyof IntrinsicElements>
-
color?
ScopedColorFg | ScopedColorPalette | (string & {})
-
display?
"flex" | "none"
"flex"

Examples

Offset X

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

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

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

export default function FloatOffsetX() {
  return (
    <Box
      position="relative"
      width="480px"
      height="480px"
      borderWidth={1}
      borderColor="stroke.neutral"
    >
      <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에서는 상측 방향으로 조정됩니다.

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

export default function FloatOffsetY() {
  return (
    <Box
      position="relative"
      width="480px"
      height="480px"
      borderWidth={1}
      borderColor="stroke.neutral"
    >
      <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>
  );
}

Last updated on

Flex

Flex 컴포넌트는 flexbox를 사용하며 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.

HStack

가로로 쌓이는 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.

On this page

Props
Examples
Offset X
Offset Y