KRDS Vue

링크 Link ​

링크는 다른 서비스/애플리케이션, 한 서비스 내의 다른 화면, 한 화면 내의 다른 섹션 등으로 이동하는 데 사용되는 탐색 요소이다.

KRDS 가이드

기본 ​

target="_blank"이면 rel="noopener noreferrer"가 자동으로 붙습니다. 새 창으로 열리는 링크는 title로 그 사실을 알립니다.

기본 링크
vue
<script setup lang="ts">
  import { KrdsLink } from '@krds.ui/vue'
</script>

<template>
  <KrdsLink href="https://www.site_name.com/" size="small" target="_blank" title="새 창 열림">
    <span class="underline">기본 링크</span> <i class="svg-icon ico-go"></i>
  </KrdsLink>
</template>

모든 링크 변형 ​

vue
<script setup lang="ts">
  import { KrdsLink } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <KrdsLink href="#!" size="medium" pure>
      <span class="underline">가상클래스 상태 시 컬러 유지</span>
    </KrdsLink>

    <KrdsLink href="#!" size="large" basic target="_blank" title="새 창 열림">
      <span class="underline">본문 텍스트 컬러 링크</span> <i class="svg-icon ico-go"></i>
    </KrdsLink>

    <KrdsLink href="#!" size="large" basic>
      <span class="underline hidden-underline">가상클래스 상태 시 밑줄</span>
    </KrdsLink>

    <KrdsLink href="#!" size="large" basic>
      <span>밑줄 없음</span>
    </KrdsLink>
  </div>
</template>

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
linkbooleantrueLink 클래스 적용 여부
titlestring-링크 제목 (접근성)
sizeKrdsLinkSize-링크 크기
hrefstring'#!'링크 URL
purebooleanfalsePure 링크 여부 (가상클래스 상태 시 컬러 유지)
targetstring-링크 대상 (_blank, _self 등)
basicbooleanfalseBasic 링크 여부 (본문 텍스트 컬러)

Events

이름인자설명
click[event: MouseEvent]링크를 클릭했을 때

Slots

이름설명
default링크 내용