ScrollFog
ScrollFog는 스크롤 가능한 컨테이너의 가장자리에 점진적으로 사라지는 fog(안개) 효과를 적용하여, 추가 콘텐츠가 있음을 시각적으로 표현하는 컴포넌트입니다.
import { Box, ScrollFog, VStack } from "@seed-design/react";
export default function ScrollFogPreview() {
return (
<div
style={{
maxHeight: "200px",
width: "300px",
border: "1px solid var(--seed-color-stroke-neutral-weak)",
borderRadius: "8px",
}}
>
<ScrollFog>
<VStack gap="x4" p="x4" width="full">
{Array.from({ length: 20 }, (_, i) => (
<Box key={i} bg="gray" px="x4" py="x3" borderRadius="r2">
{i + 1}
</Box>
))}
</VStack>
</ScrollFog>
</div>
);
}해당 ScrollFog 컴포넌트는 Chakra ScrollArea, Radix ScrollArea, Base ScrollArea 보다는 더 간단한 스크롤 힌트만을 위한 컴포넌트입니다. 이후 스크롤바에 대한 기능이 추가적으로 필요하다면 확장될 수 있습니다.
Usage
import { ScrollFog } from "@seed-design/react";<div style={{ maxHeight: "300px" }}>
<ScrollFog>
{/* 스크롤 가능한 콘텐츠 */}
</ScrollFog>
</div>Usage
<ScrollFog>Scrollable content</ScrollFog>Props
ScrollFog
Prop
Type
Examples
Horizontal Scroll
가로 스크롤이 필요한 경우 placement={["left", "right"]}를 사용하여 좌우 fog 효과를 적용할 수 있습니다.
import { HStack, ScrollFog } from "@seed-design/react";
export default function ScrollFogHorizontal() {
return (
<div
style={{
border: "1px solid var(--seed-color-stroke-neutral-weak)",
borderRadius: "8px",
width: "300px",
}}
>
<ScrollFog placement={["left", "right"]}>
<HStack gap="x3" p="x4" style={{ width: "max-content" }}>
{Array.from({ length: 15 }, (_, i) => (
<div
key={i}
style={{
minWidth: "120px",
padding: "20px",
backgroundColor: "gray",
borderRadius: "4px",
textAlign: "center",
}}
>
{i + 1}
</div>
))}
</HStack>
</ScrollFog>
</div>
);
}Size
size 속성을 이용해 스크롤 효과의 크기를 조절할 수 있습니다. sizes 속성을 이용해 각 방향별 크기를 조절할 수 있습니다.
import { ScrollFog } from "@seed-design/react";
export default function ScrollFogSize() {
return (
<div
style={{
maxWidth: "400px",
maxHeight: "300px",
border: "1px solid var(--seed-color-stroke-neutral-weak)",
borderRadius: "8px",
}}
>
<ScrollFog size={40} placement={["top", "bottom", "left", "right"]}>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(10, 100px)",
gap: "12px",
padding: "16px",
}}
>
{Array.from({ length: 100 }, (_, i) => (
<div
key={i}
style={{
width: "100px",
height: "100px",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "gray",
borderRadius: "4px",
fontSize: "14px",
}}
>
{i + 1}
</div>
))}
</div>
</ScrollFog>
</div>
);
}import { ScrollFog } from "@seed-design/react";
export default function ScrollFogSize() {
return (
<div
style={{
maxWidth: "400px",
maxHeight: "300px",
border: "1px solid var(--seed-color-stroke-neutral-weak)",
borderRadius: "8px",
}}
>
<ScrollFog
sizes={{
top: 100,
bottom: 10,
left: 50,
right: 50,
}}
placement={["top", "bottom", "left", "right"]}
>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(10, 100px)",
gap: "12px",
padding: "16px",
}}
>
{Array.from({ length: 100 }, (_, i) => (
<div
key={i}
style={{
width: "100px",
height: "100px",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "gray",
borderRadius: "4px",
fontSize: "14px",
}}
>
{i + 1}
</div>
))}
</div>
</ScrollFog>
</div>
);
}All Directions
2D 스크롤이 필요한 경우 placement={["top", "bottom", "left", "right"]}를 사용하여 모든 방향에 fog 효과를 적용할 수 있습니다.
import { ScrollFog } from "@seed-design/react";
export default function ScrollFogAllDirections() {
return (
<div
style={{
maxWidth: "400px",
maxHeight: "300px",
border: "1px solid var(--seed-color-stroke-neutral-weak)",
borderRadius: "8px",
}}
>
<ScrollFog placement={["top", "bottom", "left", "right"]}>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(10, 100px)",
gap: "12px",
padding: "16px",
}}
>
{Array.from({ length: 100 }, (_, i) => (
<div
key={i}
style={{
width: "100px",
height: "100px",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "gray",
borderRadius: "4px",
fontSize: "14px",
}}
>
{i + 1}
</div>
))}
</div>
</ScrollFog>
</div>
);
}Hide Scrollbar
hideScrollBar 속성을 이용해 스크롤바를 숨길 수 있습니다.
import { ScrollFog } from "@seed-design/react";
export default function ScrollFogHideScrollbar() {
return (
<div
style={{
maxWidth: "400px",
maxHeight: "300px",
border: "1px solid var(--seed-color-stroke-neutral-weak)",
borderRadius: "8px",
}}
>
<ScrollFog hideScrollBar placement={["top", "bottom", "left", "right"]}>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(10, 100px)",
gap: "12px",
padding: "16px",
}}
>
{Array.from({ length: 100 }, (_, i) => (
<div
key={i}
style={{
width: "100px",
height: "100px",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "gray",
borderRadius: "4px",
fontSize: "14px",
}}
>
{i + 1}
</div>
))}
</div>
</ScrollFog>
</div>
);
}On Visibility Change
onVisibilityChange 속성을 이용해 스크롤 효과의 가시성이 변경될 때 콜백을 호출할 수 있습니다.
import { ScrollFog } from "@seed-design/react";
export default function ScrollFogOnVisibilityChange() {
return (
<div
style={{
maxWidth: "400px",
maxHeight: "300px",
border: "1px solid var(--seed-color-stroke-neutral-weak)",
borderRadius: "8px",
}}
>
<ScrollFog
onVisibilityChange={(visible) => {
console.log("visibility changed", visible);
}}
placement={["top", "bottom", "left", "right"]}
>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(10, 100px)",
gap: "12px",
padding: "16px",
}}
>
{Array.from({ length: 100 }, (_, i) => (
<div
key={i}
style={{
width: "100px",
height: "100px",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "gray",
borderRadius: "4px",
fontSize: "14px",
}}
>
{i + 1}
</div>
))}
</div>
</ScrollFog>
</div>
);
}Last updated on