Anchor 앵커
페이지의 지정한 위치로 이동하는 컴포넌트예요.
출처: 문서
본문
언제 사용하나요
페이지의 여러 부분 사이를 빠르게 이동해야 할 때 사용해요.
기본 사용법
페이지 안에서 이렇게 사용해요:
<!-- class="scrollTarget" 加上这个类名是局部滚动,不加是全局滚动 -->
<div v-d-anchor-box className="scrollTarget">
<ul>
<li v-d-anchor-link="anchorlink-one">anchorlink-one</li>
<li v-d-anchor-link="anchorlink-two">anchorlink-two</li>
<li v-d-anchor-link="anchorlink-three">anchorlink-three</li>
<li v-d-anchor-link="anchorlink-four">anchorlink-four</li>
</ul>
<div>
<div v-d-anchor="anchorlink-one">
anchorlink-one1
</div>
<div v-d-anchor="anchorlink-two">
anchorlink-two
</div>
<div v-d-anchor="anchorlink-three">
anchorlink-three
</div>
<div v-d-anchor="anchorlink-four">
anchorlink-four
</div>
</div>
</div>
Anchor
하나의 앵커를 정의해요.
Anchor 파라미터
| 파라미터 | 타입 | 기본값 | 설명 | Demo 링크 | 전역 설정 |
|---|---|---|---|---|---|
| dAnchor | string |
-- | 필수, 앵커 이름 설정 | 기본 사용법 | |
| anchorActive | string |
-- | 선택, 앵커 활성화 상태일 때 모듈에 적용할 css 클래스명 | 기본 사용법 |
Anchor 앵커 활성화 이벤트
활성화 대상에 따라 앵커에 아래 클래스가 자동으로 붙어요.
| css 클래스명 | 의미 |
|---|---|
| anchor-active-by-anchor-link | 앵커 링크 클릭으로 활성화 |
| anchor-active-by-scroll | 컨테이너가 앵커 위치로 스크롤되면 활성화 |
| anchor-active-by-click-inside | 앵커 내부 콘텐츠 클릭으로 활성화 |
| anchor-active-by-initial | 초기 스크롤바 위치로 활성화 |
AnchorLink
앵커의 링크를 정의해요. 링크를 클릭하면 앵커로 슬라이드해서 이동하고, 앵커가 페이지 맨 위에 있을 때도 링크의 class가 활성화돼요.
AnchorLink 파라미터
| 파라미터 | 타입 | 기본값 | 설명 | Demo 링크 | 전역 설정 |
|---|---|---|---|---|---|
| dAnchorLink | string |
-- | 필수, 클릭 시 이동할 대상 앵커의 이름 | 기본 사용법 | |
| anchorActive | string |
-- | 활성화 상태일 때 링크에 적용할 css 클래스 이름이에요 | 기본 사용법 |
AnchorBox
반드시 하나의 컨테이너가 있어야 하고, 없으면 기능을 사용할 수 없어요.
앵커를 스캔하는 컨테이너를 정의해요. dAnchor와 dAnchorLink의 공통 부모 노드에 놓고, 앵커와 링크 사이의 통신을 담당해요.
더 알아보기 (Learn more)
v-d-anchor-box 컨테이너 안에 v-d-anchor(앵커)와 v-d-anchor-link(링크)를 짝지어 배치하면 클릭 한 번으로 해당 위치로 슬라이드 이동해요. 활성화 원인별로 다른 css 클래스가 자동으로 붙는 것도 활용해 보세요.