Anchor 앵커

페이지 내 앵커 내비게이션과 스크롤 연동 하이라이트를 제공합니다. <nav> 의미와 aria-current="location"을 사용합니다.

기본 사용법

기본 사용법

• 첫 번째 섹션
• 두 번째 섹션
• 두 번째 섹션의 하위

<script setup>
const anchorItems = [
  { id: 'sec-1', title: '첫 번째 섹션' },
  { id: 'sec-2', title: '두 번째 섹션', children: [{ id: 'sec-2-1', title: '두 번째 섹션의 하위' }] },
]
</script>

<template>
  <LhAnchor :items="anchorItems" />
</template>

<script>
export default {
  data() {
    return {
      anchorItems: [
        { id: 'sec-1', title: '첫 번째 섹션' },
        { id: 'sec-2', title: '두 번째 섹션', children: [{ id: 'sec-2-1', title: '두 번째 섹션의 하위' }] },
      ],
    }
  },
}
</script>

<template>
  <LhAnchor :items="anchorItems" />
</template>

가로 배치와 스크롤 옵션

direction="horizontal"로 가로 배치로 전환합니다. smooth로 부드러운 스크롤을 끄고, offset으로 앵커 영역의 스크롤 컨테이너 상단 기준 오프셋을 보정하고, target으로 특정 스크롤 컨테이너를 감시합니다(기본값 window).

가로 앵커

• 첫 번째 섹션
• 두 번째 섹션
• 두 번째 섹션의 하위

<script setup>
const anchorItems = [
  { id: 'sec-1', title: '첫 번째 섹션' },
  { id: 'sec-2', title: '두 번째 섹션' },
]
</script>

<template>
  <!-- 가로 앵커 -->
  <LhAnchor
    :items="anchorItems"
    direction="horizontal"
    :offset="8"
    :smooth="true"
  />
</template>

<script>
export default {
  data() {
    return {
      anchorItems: [
        { id: 'sec-1', title: '첫 번째 섹션' },
        { id: 'sec-2', title: '두 번째 섹션' },
      ],
    }
  },
}
</script>

<template>
  <!-- 가로 앵커 -->
  <LhAnchor
    :items="anchorItems"
    direction="horizontal"
    :offset="8"
    :smooth="true"
  />
</template>

API

LhAnchor Props

속성	설명	타입	기본값
items	앵커 데이터(하위 항목 지원)	[LhAnchorItem](#type-LhAnchorItem)[]	—
target	스크롤 컨테이너(선택자 또는 요소, 기본값 window)	string | HTMLElement	—
offset	앵커 영역의 스크롤 컨테이너 상단 기준 오프셋(연동 판정에 사용)	number	0
direction	배치 방향	"vertical" | "horizontal"	'vertical'
smooth	부드러운 스크롤	boolean	true
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Events

이벤트	설명	콜백 매개변수
change	현재 활성 앵커가 변경될 때 발생(스크롤 연동 또는 앵커 클릭)	(id: string)
click	앵커 링크를 클릭할 때 발생(스크롤 이동보다 먼저 전달됨)	(event: MouseEvent, id: string)

LhAnchorItem

필드	설명	타입
id	대상 요소 id	string
title	표시 텍스트	string
children	하위 앵커	LhAnchorItem[]

접근성

• 컨테이너는 의미적 <nav>이며 aria-label을 갖고, 현재 앵커는 aria-current="location"으로 표시합니다
• 링크는 실제 <a href="#id">입니다(JS 없이도 이동 가능하며 클릭 시 부드러운 스크롤로 보강됩니다)
• 부드러운 스크롤은 prefers-reduced-motion: reduce 환경에서 자동으로 즉시 이동으로 전환됩니다

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/anchor/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhAnchorProps

export interface LhAnchorProps {
  /** 앵커 데이터(하위 항목 지원) */
  items: LhAnchorItem[]
  /** 스크롤 컨테이너(선택자 또는 요소, 기본값 window) */
  target?: string | HTMLElement
  /** 앵커 영역의 스크롤 컨테이너 상단 기준 오프셋(연동 판정에 사용) */
  offset?: number
  /** 배치 방향 */
  direction?: 'vertical' | 'horizontal'
  /** 부드러운 스크롤 */
  smooth?: boolean
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhFlatAnchorItem _{(@lh-ui/share/core/anchor에서 가져옴)}

/** 평탄화된 앵커 항목(렌더링용) */
export interface LhFlatAnchorItem {
  id: string
  title: string
  level: number
}

LhAnchorItem _{(@lh-ui/share/core/anchor에서 가져옴)}

/** 앵커 항목 */
export interface LhAnchorItem {
  /** 대상 요소 id */
  id: string
  /** 표시 텍스트 */
  title: string
  /** 하위 앵커 */
  children?: LhAnchorItem[]
}