KRDS Vue

맥락적 도움말 Contextual help ​

컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.

KRDS 가이드

기본 ​

아이콘 버튼을 누르면 도움말이 열리고 그 안의 첫 번째 링크나 버튼으로 포커스가 이동합니다. 닫기 버튼, Esc 키, 바깥 클릭으로 닫고, 닫기 버튼과 Esc 키로 닫으면 포커스가 아이콘 버튼으로 돌아옵니다. 도움말은 제목으로 이름 붙인 대화 상자(role="dialog")라 화면낭독기가 제목과 함께 읽습니다.

예시이미지(상단 왼쪽)

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

<template>
  <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 500px">
    <div style="display: flex; align-items: center; gap: 8px">
      <p>예시이미지(상단 왼쪽)</p>
      <KrdsContextualHelp>
        <p>
          컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
          아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
        </p>
        <div class="btn-wrap">
          <a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
        </div>
      </KrdsContextualHelp>
    </div>
  </div>
</template>

위치 ​

position으로 도움말이 열리는 위치를 지정합니다. 기본값은 top left입니다.

예시이미지(상단 왼쪽)

예시이미지(상단 중앙)

예시이미지(상단 오른쪽)

예시이미지(하단 왼쪽)

예시이미지(하단 중앙)

예시이미지(하단 오른쪽)

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

<template>
  <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 800px">
    <div style="display: flex; align-items: center; gap: 8px">
      <p>예시이미지(상단 왼쪽)</p>
      <KrdsContextualHelp tooltip-title="도움말 제목">
        <p>
          컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
          아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
        </p>
        <div class="btn-wrap">
          <a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
        </div>
      </KrdsContextualHelp>
    </div>
    <div style="display: flex; align-items: center; gap: 8px">
      <p>예시이미지(상단 중앙)</p>
      <KrdsContextualHelp tooltip-title="도움말 제목" position="top center">
        <p>
          컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
          아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
        </p>
        <div class="btn-wrap">
          <a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
        </div>
      </KrdsContextualHelp>
    </div>
    <div style="display: flex; align-items: center; gap: 8px">
      <p>예시이미지(상단 오른쪽)</p>
      <KrdsContextualHelp tooltip-title="도움말 제목" position="top right">
        <p>
          컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
          아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
        </p>
        <div class="btn-wrap">
          <a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
        </div>
      </KrdsContextualHelp>
    </div>
    <div style="display: flex; align-items: center; gap: 8px">
      <p>예시이미지(하단 왼쪽)</p>
      <KrdsContextualHelp tooltip-title="도움말 제목" position="bottom left">
        <p>
          컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
          아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
        </p>
        <div class="btn-wrap">
          <a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
        </div>
      </KrdsContextualHelp>
    </div>
    <div style="display: flex; align-items: center; gap: 8px">
      <p>예시이미지(하단 중앙)</p>
      <KrdsContextualHelp tooltip-title="도움말 제목" position="bottom center">
        <p>
          컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
          아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
        </p>
        <div class="btn-wrap">
          <a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
        </div>
      </KrdsContextualHelp>
    </div>
    <div style="display: flex; align-items: center; gap: 8px">
      <p>예시이미지(하단 오른쪽)</p>
      <KrdsContextualHelp tooltip-title="도움말 제목" position="bottom right">
        <p>
          컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
          아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
        </p>
        <div class="btn-wrap">
          <a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
        </div>
      </KrdsContextualHelp>
    </div>
  </div>
</template>

도움말 아이콘 ​

help-icon을 지정하면 정보 아이콘 대신 도움(물음표) 아이콘을 표시합니다.

예시이미지(상단 왼쪽)

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

<template>
  <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 500px">
    <div style="display: flex; align-items: center; gap: 8px">
      <p>예시이미지(상단 왼쪽)</p>
      <KrdsContextualHelp tooltip-title="도움말 제목" help-icon>
        <p>
          컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
          아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
        </p>
        <div class="btn-wrap">
          <a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right"></i></a>
        </div>
      </KrdsContextualHelp>
    </div>
  </div>
</template>

KrdsContextualHelp ​

Props

이름타입기본값설명
tooltipTitlestring'도움말 제목'툴팁 제목
helpIconbooleanfalse도움말 아이콘 사용 여부 (false 면 툴팁 아이콘)
positionContextualHelpPosition'top left'툴팁 노출 위치

Slots

이름설명
default도움말 내용