Scroll Fog

스크롤 가능한 영역에서 사용자에게 추가 콘텐츠가 있음을 시각적으로 알려주는 힌트 역할을 합니다.

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

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

import "./styles";

import { Box, ScrollFog, Text, VStack, useSeedClassName } from "@seed-design/lynx-react";

const ITEMS = Array.from({ length: 20 }, (_, index) => index + 1);

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <Box
      className={seedClassName}
      height="full"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg.layerDefault"
    >
      <Box
        width="300px"
        height="240px"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        borderRadius="8px"
        style={{ overflow: "hidden" }}
      >
        <ScrollFog style={{ width: "100%", height: "100%" }} placement={["top", "bottom"]}>
          <VStack pt="20px" px="16px" pb="80px" gap="8px">
            {ITEMS.map((item) => (
              <Box
                key={item}
                height="40px"
                flexShrink={false}
                display="flex"
                alignItems="center"
                justifyContent="center"
                borderRadius="4px"
                bg="bg.neutralWeak"
              >
                <Text color="fg.neutral" fontSize="14px">
                  콘텐츠 {item}
                </Text>
              </Box>
            ))}
          </VStack>
        </ScrollFog>
      </Box>
    </Box>
  );
}

Scroll Fog는 완전한 Scroll Area보다 간단한 스크롤 힌트를 위한 컴포넌트입니다. 스크롤 영역 위에 Rootage의 gradient.fade-mask를 사용하는 별도의 비인터랙티브 mask layer를 표시합니다.

Installation

npm install @seed-design/lynx-react

pnpm add @seed-design/lynx-react

yarn add @seed-design/lynx-react

bun add @seed-design/lynx-react

Lynx의 ScrollFog는 Registry snippet이나 Recipe 없이 @seed-design/lynx-react 패키지에서 직접 제공합니다.

ScrollFog는 React 버전과 동일하게 임의 방향의 placement, 공통 size, 방향별 sizes, hideScrollBar를 지원합니다. placement에 top, bottom, left, right를 원하는 조합으로 지정할 수 있습니다. Fog 레이어는 터치 입력을 가로채지 않으므로 콘텐츠를 스크롤하거나 조작할 수 있습니다.

import { ScrollFog } from "@seed-design/lynx-react";

export function App() {
  return (
    <view style={{ height: "300px" }}>
      <ScrollFog placement={["top", "bottom"]}>
        <view style={{ padding: "20px 0 80px" }}>
          <text>스크롤할 콘텐츠</text>
        </view>
      </ScrollFog>
    </view>
  );
}

Props

Scroll Fog

Prop

Type

children?React.ReactNode

className?string | undefined

style?string | CSSProperties | undefined

Examples

Padding

ScrollFog는 항상 fog 효과를 표시하므로, 지정된 방향에 충분한 padding이 필요합니다.

최소 padding: 20px을 유지해야 합니다.
화면 전체를 차지하는 세로 스크롤: 하단 80px, 상단 20px padding을 권장합니다.
가로 스크롤: 좌우 20px padding을 권장합니다.

// 상하 스크롤 - 상하 padding 필요
<ScrollFog placement={["top", "bottom"]}>
  <view style={{ padding: "20px 0 80px" }}>...</view>
</ScrollFog>

// 좌우 스크롤 - 좌우 padding 필요
<ScrollFog placement={["left", "right"]}>
  <view style={{ padding: "0 20px" }}>...</view>
</ScrollFog>

Horizontal Scroll

가로 스크롤이 필요한 경우 placement={["left", "right"]}를 사용하여 좌우 fog 효과를 적용할 수 있습니다. 콘텐츠가 잘리지 않도록 좌우 20px padding을 제공하세요.

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

import "./styles";

import { Box, HStack, ScrollFog, Text, useSeedClassName } from "@seed-design/lynx-react";

const ITEMS = Array.from({ length: 15 }, (_, index) => index + 1);

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <Box
      className={seedClassName}
      height="full"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg.layerDefault"
    >
      <Box
        width="300px"
        height="140px"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        borderRadius="8px"
        style={{ overflow: "hidden" }}
      >
        <ScrollFog style={{ width: "100%", height: "100%" }} placement={["left", "right"]}>
          <HStack width="2000px" height="full" px="20px" align="center" gap="12px">
            {ITEMS.map((item) => (
              <Box
                key={item}
                width="120px"
                height="80px"
                flexShrink={false}
                display="flex"
                alignItems="center"
                justifyContent="center"
                borderRadius="4px"
                bg="bg.neutralWeak"
              >
                <Text color="fg.neutral" fontSize="14px">
                  항목 {item}
                </Text>
              </Box>
            ))}
          </HStack>
        </ScrollFog>
      </Box>
    </Box>
  );
}

Size

size를 사용해 모든 방향의 fog 크기를 한 번에 조절할 수 있습니다. sizes를 사용하면 각 방향의 크기를 다르게 지정할 수 있습니다.

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

import "./styles";

import { Box, ScrollFog, Text, VStack, useSeedClassName } from "@seed-design/lynx-react";

const ITEMS = Array.from({ length: 20 }, (_, index) => index + 1);

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <Box
      className={seedClassName}
      height="full"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg.layerDefault"
    >
      <Box
        width="300px"
        height="240px"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        borderRadius="8px"
        style={{ overflow: "hidden" }}
      >
        <ScrollFog
          style={{ width: "100%", height: "100%" }}
          size={40}
          placement={["top", "bottom"]}
        >
          <VStack pt="40px" px="16px" pb="80px" gap="12px">
            <Text color="fg.neutralMuted" fontSize="14px">
              fog size: 40px
            </Text>
            <VStack gap="8px">
              {ITEMS.map((item) => (
                <Box
                  key={item}
                  height="40px"
                  flexShrink={false}
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  borderRadius="4px"
                  bg="bg.neutralWeak"
                >
                  <Text color="fg.neutral" fontSize="14px">
                    콘텐츠 {item}
                  </Text>
                </Box>
              ))}
            </VStack>
          </VStack>
        </ScrollFog>
      </Box>
    </Box>
  );
}

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

import "./styles";

import { Box, ScrollFog, Text, useSeedClassName } from "@seed-design/lynx-react";

const ITEMS = Array.from({ length: 100 }, (_, index) => index + 1);
const ROWS = Array.from({ length: 10 }, (_, rowIndex) => ({
  id: rowIndex + 1,
  items: ITEMS.slice(rowIndex * 10, rowIndex * 10 + 10),
}));

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <Box
      className={seedClassName}
      height="full"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg.layerDefault"
    >
      <Box
        width="400px"
        height="300px"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        borderRadius="8px"
        style={{ overflow: "hidden" }}
      >
        <ScrollFog
          style={{ width: "100%", height: "100%" }}
          sizes={{
            top: 100,
            bottom: 10,
            left: 50,
            right: 50,
          }}
          placement={["top", "bottom", "left", "right"]}
        >
          <Box
            width="1140px"
            height="1140px"
            p="16px"
            display="flex"
            flexDirection="column"
            gap="12px"
          >
            {ROWS.map((row) => (
              <Box key={row.id} display="flex" flexDirection="row" gap="12px">
                {row.items.map((item) => (
                  <Box
                    key={item}
                    width="100px"
                    height="100px"
                    flexShrink={false}
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                    borderRadius="4px"
                    bg="bg.neutralWeak"
                  >
                    <Text color="fg.neutral" fontSize="14px">
                      {item}
                    </Text>
                  </Box>
                ))}
              </Box>
            ))}
          </Box>
        </ScrollFog>
      </Box>
    </Box>
  );
}

All Directions

2D 스크롤이 필요한 경우 placement={["top", "bottom", "left", "right"]}를 사용하여 모든 방향에 fog 효과를 적용할 수 있습니다.

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

import "./styles";

import { Box, ScrollFog, Text, useSeedClassName } from "@seed-design/lynx-react";

const ITEMS = Array.from({ length: 100 }, (_, index) => index + 1);
const ROWS = Array.from({ length: 10 }, (_, rowIndex) => ({
  id: rowIndex + 1,
  items: ITEMS.slice(rowIndex * 10, rowIndex * 10 + 10),
}));

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <Box
      className={seedClassName}
      height="full"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg.layerDefault"
    >
      <Box
        width="400px"
        height="300px"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        borderRadius="8px"
        style={{ overflow: "hidden" }}
      >
        <ScrollFog
          style={{ width: "100%", height: "100%" }}
          placement={["top", "bottom", "left", "right"]}
        >
          <Box
            width="1148px"
            height="1148px"
            p="20px"
            display="flex"
            flexDirection="column"
            gap="12px"
          >
            {ROWS.map((row) => (
              <Box key={row.id} display="flex" flexDirection="row" gap="12px">
                {row.items.map((item) => (
                  <Box
                    key={item}
                    width="100px"
                    height="100px"
                    flexShrink={false}
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                    borderRadius="4px"
                    bg="bg.neutralWeak"
                  >
                    <Text color="fg.neutral" fontSize="14px">
                      {item}
                    </Text>
                  </Box>
                ))}
              </Box>
            ))}
          </Box>
        </ScrollFog>
      </Box>
    </Box>
  );
}

Hide Scrollbar

hideScrollBar를 사용하면 fog 효과는 유지하면서 스크롤바를 숨길 수 있습니다.

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

import "./styles";

import { Box, ScrollFog, Text, VStack, useSeedClassName } from "@seed-design/lynx-react";

const ITEMS = Array.from({ length: 20 }, (_, index) => index + 1);

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <Box
      className={seedClassName}
      height="full"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg.layerDefault"
    >
      <Box
        width="300px"
        height="240px"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        borderRadius="8px"
        style={{ overflow: "hidden" }}
      >
        <ScrollFog
          style={{ width: "100%", height: "100%" }}
          hideScrollBar
          placement={["top", "bottom"]}
        >
          <VStack pt="20px" px="16px" pb="80px" gap="12px">
            <Text color="fg.neutralMuted" fontSize="14px">
              hideScrollBar: true
            </Text>
            <VStack gap="8px">
              {ITEMS.map((item) => (
                <Box
                  key={item}
                  height="40px"
                  flexShrink={false}
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  borderRadius="4px"
                  bg="bg.neutralWeak"
                >
                  <Text color="fg.neutral" fontSize="14px">
                    콘텐츠 {item}
                  </Text>
                </Box>
              ))}
            </VStack>
          </VStack>
        </ScrollFog>
      </Box>
    </Box>
  );
}

Scroll Fog

Installation

Usage

Props

Scroll Fog

Examples

Padding

Horizontal Scroll

Size

All Directions

Hide Scrollbar

목차