맥락적 도움말 Contextual help
컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움 아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
기본
heading으로 도움말 제목을 주고, 설명과 링크는 요소 안에 넣습니다. 아이콘 버튼을 누르면 도움말이 열리고 그 안의 첫 번째 링크나 버튼으로 포커스가 이동합니다. 닫기 버튼, Esc 키, 바깥 클릭, 아이콘 버튼을 다시 누르는 것으로 닫고, 닫기 버튼과 Esc 키로 닫으면 포커스가 아이콘 버튼으로 돌아옵니다. 도움말은 제목으로 이름 붙인 대화 상자(role="dialog")라 화면낭독기가 제목과 함께 읽고, 아이콘 버튼은 aria-expanded로 열림 상태를 알립니다. 도움말 하나를 열면 열려 있던 다른 도움말은 닫힙니다.
ts
import { Component } from '@angular/core'
import { KrdsContextualHelp } from '@krds.ui/angular'
@Component({
selector: 'demo-contextual-help-basic',
imports: [KrdsContextualHelp],
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>
<krds-contextual-help heading="도움말 제목">
<p>
컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
</p>
<div class="btn-wrap">
<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right" aria-hidden="true"></i></a>
</div>
</krds-contextual-help>
</div>
</div>
`
})
export default class ContextualHelpBasic {}위치
position으로 도움말이 열리는 위치를 지정합니다. 기본값은 top left입니다. 768px 이하 화면에서는 도움말을 화면 폭에 맞춰 펼칩니다.
ts
import { Component } from '@angular/core'
import { KrdsContextualHelp } from '@krds.ui/angular'
@Component({
selector: 'demo-contextual-help-positions',
imports: [KrdsContextualHelp],
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>
<krds-contextual-help heading="도움말 제목">
<p>
컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
</p>
<div class="btn-wrap">
<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right" aria-hidden="true"></i></a>
</div>
</krds-contextual-help>
</div>
<div style="display: flex; align-items: center; gap: 8px">
<p>예시이미지(상단 중앙)</p>
<krds-contextual-help heading="도움말 제목" position="top center">
<p>
컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
</p>
<div class="btn-wrap">
<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right" aria-hidden="true"></i></a>
</div>
</krds-contextual-help>
</div>
<div style="display: flex; align-items: center; gap: 8px">
<p>예시이미지(상단 오른쪽)</p>
<krds-contextual-help heading="도움말 제목" position="top right">
<p>
컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
</p>
<div class="btn-wrap">
<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right" aria-hidden="true"></i></a>
</div>
</krds-contextual-help>
</div>
<div style="display: flex; align-items: center; gap: 8px">
<p>예시이미지(하단 왼쪽)</p>
<krds-contextual-help heading="도움말 제목" position="bottom left">
<p>
컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
</p>
<div class="btn-wrap">
<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right" aria-hidden="true"></i></a>
</div>
</krds-contextual-help>
</div>
<div style="display: flex; align-items: center; gap: 8px">
<p>예시이미지(하단 중앙)</p>
<krds-contextual-help heading="도움말 제목" position="bottom center">
<p>
컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
</p>
<div class="btn-wrap">
<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right" aria-hidden="true"></i></a>
</div>
</krds-contextual-help>
</div>
<div style="display: flex; align-items: center; gap: 8px">
<p>예시이미지(하단 오른쪽)</p>
<krds-contextual-help heading="도움말 제목" position="bottom right">
<p>
컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
</p>
<div class="btn-wrap">
<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right" aria-hidden="true"></i></a>
</div>
</krds-contextual-help>
</div>
</div>
`
})
export default class ContextualHelpPositions {}도움말 아이콘
helpIcon을 지정하면 정보 아이콘 대신 도움(물음표) 아이콘을 표시합니다.
ts
import { Component } from '@angular/core'
import { KrdsContextualHelp } from '@krds.ui/angular'
@Component({
selector: 'demo-contextual-help-help-icon',
imports: [KrdsContextualHelp],
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>
<krds-contextual-help heading="도움말 제목" helpIcon>
<p>
컴포넌트 주변에 배치되어 해당 컴포넌트의 상태나 관련된 상세 정보를 제공하는 컴포넌트이다. 맥락적 도움말은 정보 아이콘이나 도움
아이콘 버튼을 통해 사용자가 요청하는 경우에만 화면에 표시된다.
</p>
<div class="btn-wrap">
<a href="#;" class="krds-btn xsmall link basic">바로가기 <i class="svg-icon ico-angle right" aria-hidden="true"></i></a>
</div>
</krds-contextual-help>
</div>
</div>
`
})
export default class ContextualHelpHelpIcon {}KrdsContextualHelp
선택자 krds-contextual-help
Inputs
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
heading (필수) | string | - | 도움말 제목 (title 속성은 기본 툴팁이 되므로 heading으로 받음) |
helpIcon | boolean | false | 물음표 모양 도움 아이콘 (기본은 정보 아이콘) |
position | 'top left' | 'top center' | 'top right' | 'bottom left' | 'bottom center' | 'bottom right' | 'top left' | 펼쳐지는 위치 |