Panel

@hua-labs/ui

v1.2.0

10가지 이상의 비주얼 스타일, 효과, 인터랙티브 기능을 가진 고급 패널 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Panel } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

Pro

라이브 데모

기본 스타일

Solid

기본 솔리드 스타일

Glass

글래스모피즘

Elevated

그림자 강조

Outline

테두리만

프리미엄 스타일

Neon

네온 글로우

Cyberpunk

사이버펑크

Holographic

홀로그래픽

Luxury

럭셔리 골드

지원 스타일

defaultsolidglassoutlineelevatedneonholographiccyberpunkminimalluxury

상속

Panel 확장 컴포넌트 Card 이 컴포넌트는 Panel의 모든 props를 상속받습니다.

Props

이름	타입	기본값	설명
`style`	`"default" \| "solid" \| "glass" \| "outline" \| "elevated" \| "neon" \| "holographic" \| "cyberpunk" \| "minimal" \| "luxury"`	`"default"`	패널 비주얼 스타일
`effect`	`"none" \| "glow" \| "shadow" \| "gradient" \| "animated"`	`"none"`	비주얼 효과
`padding`	`"none" \| "small" \| "sm" \| "medium" \| "md" \| "large" \| "lg" \| "xl" \| "custom"`	`"md"`	패딩 크기
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "custom"`	`"lg"`	모서리 둥글기
`interactive`	`boolean`	`false`	호버 효과 활성화
`transparency`	`number`	`1`	투명도 (0-1)
`blurIntensity`	`number`	`0`	Blur intensity in px
`glowIntensity`	`number`	`0`	Glow intensity in px
`borderOpacity`	`number`	-	Border opacity (0-1)
`shadowOpacity`	`number`	-	Shadow opacity (0-1)
`glowColor`	`string`	-	Custom glow color
`particleEffect`	`boolean`	`false`	Enable particle effect
`hoverEffect`	`boolean`	`false`	Enable hover effect
`animationEffect`	`boolean`	`false`	Enable animation effect
`customPadding`	`string`	-	Custom padding value (CSS)
`customRounded`	`string`	-	Custom border-radius value (CSS)
`background`	`"gradient" \| "solid" \| "pattern" \| "image" \| "video"`	-	Background type
`gradientColors`	`string[]`	-	Gradient colors array
`patternType`	`"dots" \| "lines" \| "grid" \| "waves" \| "custom"`	-	Pattern type for pattern background
`backgroundImage`	`string`	-	Background image URL
`backgroundVideo`	`string`	-	Background video URL
`hoverScale`	`number`	-	Scale factor on hover (e.g., 1.05)
`hoverRotate`	`number`	-	Rotation degrees on hover
`hoverGlow`	`boolean`	`false`	Enable glow effect on hover

코드 예시

docs:components.panel.examples.basictsx

1import { Panel } from '@hua-labs/ui';
2 
3<Panel style="solid">Solid Panel</Panel>
4<Panel style="glass">Glass Panel</Panel>
5<Panel style="elevated">Elevated Panel</Panel>

docs:components.panel.examples.neonCyberpunktsx

1<Panel style="neon" effect="glow">
2  Neon Style
3</Panel>
4 
5<Panel style="cyberpunk">
6  Cyberpunk Style
7</Panel>

docs:components.panel.examples.interactivetsx

1<Panel
2  style="elevated"
3  interactive
4  hoverScale={1.05}
5  hoverGlow
6>
7  Hover me!
8</Panel>

접근성

•Card 기반: Card 컴포넌트를 확장한 고급 스타일링

Divider Section