Lynx
Scroll Fog
스크롤 가능한 영역에서 사용자에게 추가 콘텐츠가 있음을 시각적으로 알려주는 힌트 역할을 합니다.
사용 가능 버전@seed-design/[email protected], @seed-design/[email protected]
Lynx 예제를 불러오는 중입니다.
import { Box, ScrollFog, Text, VStack } from "@seed-design/lynx-react";
const ITEMS = Array.from({ length: 20 }, (_, index) => index + 1);
export default function Example() {
return (
<Box
width="full"
maxWidth="300px"
height="240px"
borderWidth={1}
borderColor="stroke.neutralWeak"
borderRadius="8px"
style={{ overflow: "hidden" }}
>
<ScrollFog style={{ width: "100%", height: "100%" }} placement={["top", "bottom"]}>
<scroll-view
scroll-orientation="vertical"
style={{ width: "100%", height: "100%", padding: "20px 16px 80px" }}
>
<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>
</scroll-view>
</ScrollFog>
</Box>
);
}Scroll Fog는 지정한 가장자리에 mask를 적용하며 직접 스크롤하지 않습니다. 스크롤할 콘텐츠를 자식으로 배치하세요.
Installation
npm install @seed-design/lynx-reactpnpm add @seed-design/lynx-reactyarn add @seed-design/lynx-reactbun add @seed-design/lynx-reactUsage
ScrollFog 안에 스크롤 방향과 같은 축의 <scroll-view>를 배치하세요. placement는 세로 또는 가로 한 축의 방향만 받습니다. size와 sizes로 fog 크기를 조절할 수 있습니다.
import { ScrollFog } from "@seed-design/lynx-react";
export function App() {
return (
<view style={{ height: "300px" }}>
<ScrollFog placement={["top", "bottom"]} style={{ width: "100%", height: "100%" }}>
<scroll-view
scroll-orientation="vertical"
style={{ width: "100%", height: "100%", padding: "20px 0 80px" }}
>
<text>스크롤할 콘텐츠</text>
</scroll-view>
</ScrollFog>
</view>
);
}Props
Scroll Fog
Prop
Type
Examples
Padding
ScrollFog는 항상 fog를 표시하므로 <scroll-view>의 지정 방향에 충분한 padding을 두세요. 최소 20px을 권장하며, 화면 전체를 차지하는 세로 스크롤은 하단 80px을 권장합니다.
<ScrollFog placement={["top", "bottom"]}>
<scroll-view scroll-orientation="vertical" style={{ padding: "20px 0 80px" }}>
...
</scroll-view>
</ScrollFog>
<ScrollFog placement={["left", "right"]}>
<scroll-view scroll-orientation="horizontal" style={{ padding: "0 20px" }}>
...
</scroll-view>
</ScrollFog>Horizontal Scroll
Lynx 예제를 불러오는 중입니다.
import { Box, HStack, ScrollFog, Text } from "@seed-design/lynx-react";
const ITEMS = Array.from({ length: 15 }, (_, index) => index + 1);
export default function Example() {
return (
<Box
width="full"
maxWidth="300px"
height="140px"
borderWidth={1}
borderColor="stroke.neutralWeak"
borderRadius="8px"
style={{ overflow: "hidden" }}
>
<ScrollFog style={{ width: "100%", height: "100%" }} placement={["left", "right"]}>
<scroll-view
scroll-orientation="horizontal"
style={{ width: "100%", height: "100%", padding: "0 20px" }}
>
<HStack height="full" 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>
</scroll-view>
</ScrollFog>
</Box>
);
}Size
size를 사용해 지정한 방향의 fog 크기를 한 번에 조절할 수 있습니다. sizes를 사용하면 각 방향의 크기를 다르게 지정할 수 있습니다.
Lynx 예제를 불러오는 중입니다.
import { Box, ScrollFog, Text, VStack } from "@seed-design/lynx-react";
const ITEMS = Array.from({ length: 20 }, (_, index) => index + 1);
export default function Example() {
return (
<Box
width="full"
maxWidth="300px"
height="240px"
borderWidth={1}
borderColor="stroke.neutralWeak"
borderRadius="8px"
style={{ overflow: "hidden" }}
>
<ScrollFog style={{ width: "100%", height: "100%" }} size={40} placement={["top", "bottom"]}>
<scroll-view
scroll-orientation="vertical"
style={{ width: "100%", height: "100%", padding: "40px 16px 80px" }}
>
<VStack 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>
</scroll-view>
</ScrollFog>
</Box>
);
}Lynx 예제를 불러오는 중입니다.
import { Box, ScrollFog, Text, VStack } from "@seed-design/lynx-react";
const ITEMS = Array.from({ length: 20 }, (_, index) => index + 1);
export default function Example() {
return (
<Box
width="full"
maxWidth="300px"
height="240px"
borderWidth={1}
borderColor="stroke.neutralWeak"
borderRadius="8px"
style={{ overflow: "hidden" }}
>
<ScrollFog
style={{ width: "100%", height: "100%" }}
sizes={{ top: 20, bottom: 80 }}
placement={["top", "bottom"]}
>
<scroll-view
scroll-orientation="vertical"
style={{ width: "100%", height: "100%", padding: "20px 16px 80px" }}
>
<VStack gap="12px">
<Text color="fg.neutralMuted" fontSize="14px">
top: 20px, bottom: 80px
</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>
</scroll-view>
</ScrollFog>
</Box>
);
}웹 버전과의 차이
- 웹과 달리 Lynx
<scroll-view>는 한 축만 스크롤하므로placement도 같은 축의 방향만 받습니다. ScrollFog는 스크롤하지 않습니다. 스크롤 위치와bindscroll은 자식<scroll-view>에서 제어하세요.- 스크롤바를 숨기려면 자식
<scroll-view>에scroll-bar-enable={false}를 지정하세요.
Last updated on