Anchor

Anchor (앵커)

출처: 문서

본문

Anchor

앵커 포인트를 통해 현재 페이지에서 정보 내용의 위치를 빠르게 찾을 수 있어요.

기본 사용법

가장 기본적인 사용법이에요.

가로 모드

가로로 정렬된 앵커예요.

TIP 가로 모드에서는 하위 링크 슬롯을 지원하지 않아요.

스크롤 컨테이너

커스텀 스크롤 영역이에요. offset 속성으로 앵커 스크롤 오프셋을 설정하고, link-click 이벤트를 리슨해서 브라우저 기본 동작을 막으면 히스토리가 바뀌지 않아요.

import { ref } from 'vue'

const containerRef = ref(null)

const handleClick = (e: MouseEvent) => {
  e.preventDefault()
}

앵커 링크 변화를 리슨해요.

밑줄 타입

type="underline"으로 설정하면 밑줄 타입으로 바뀌어요.

Affix 모드

affix 컴포넌트를 사용해서 앵커 포인트를 페이지 안에 고정해요.

Anchor API

Anchor Attributes

Property Description Type Default
container 스크롤 컨테이너 string HTMLElement
offset 앵커 스크롤의 오프셋 number 0
bound 앵커를 트리거하기 시작하는 요소의 오프셋 number 15
duration 컨테이너의 스크롤 시간(밀리초) number 300
marker 마커 표시 여부 boolean true
type Anchor 타입 enum default
direction Anchor 방향 enum vertical
select-scroll-top 2.9.2 상단에서 링크가 선택되었는지 스크롤 여부 boolean false

Anchor Events

Name Description Type
change 단계가 변경될 때 콜백 Function
click 사용자가 링크를 클릭할 때 실행돼요 Function

Anchor Exposes

Name Description Type
scrollTo 특정 위치로 수동 스크롤 Function

Anchor Slots

Name Description
default AnchorLink 컴포넌트 목록
Property Description Type Default
title 앵커 링크의 텍스트 내용 string —
href 앵커 링크의 주소 string —
Name Description
default 앵커 링크의 내용
sub-link 자식 링크용 슬롯

더 알아보기 (Learn more)