DotNav

@hua-labs/ui/advanced

v1.0.0

페이지네이션 또는 섹션 콘텐츠를 위한 도트 스타일 네비게이션 인디케이터.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

Props

이름	타입	기본값
`items*`	`DotNavItem[]`	-
`position`	`"left" \| "right"`	`"right"`
`activeDotStyle`	`React.CSSProperties`	-
`inactiveDotStyle`	`React.CSSProperties`	-
`dot`	`string`	-
`style`	`React.CSSProperties`	-

코드 예시

기본 사용법

import { DotNav } from '@hua-labs/ui/advanced';

const sections = [
  { id: 'hero', label: 'Hero' },
  { id: 'about', label: 'About' },
  { id: 'features', label: 'Features' },
  { id: 'contact', label: 'Contact' },
];

export function App() {
  return (
    <>
      <DotNav items={sections} />

      <section id="hero">...</section>
      <section id="about">...</section>
      <section id="features">...</section>
      <section id="contact">...</section>
    </>
  );
}

import { DotNav } from '@hua-labs/ui/advanced';

<DotNav
  items={[{ id: 'intro' }, { id: 'body' }, { id: 'outro' }]}
  position="left"
/>

import { DotNav } from '@hua-labs/ui/advanced';

<DotNav
  items={sections}
  activeDotStyle={{ backgroundColor: '#8b5cf6', transform: 'scale(1.5)' }}
  inactiveDotStyle={{ backgroundColor: '#c4b5fd', opacity: 0.5 }}
/>

PageNavigation Modal