KRDS Angular

디스클로저 Disclosure ​

디스클로저는 특정한 정보/컨트롤/섹션에 관련된 부가적인 정보를 표시하거나 숨기는 데 사용되는 요소이다. 디스클로저 하위 콘텐츠 섹션은 기본으로 축소된 상태로 제공되며 사용자가 요청하는 경우에 확장되어 자세한 정보가 표시된다. 이는 사용자의 인지적 부담을 감소시키고 정보를 빠르게 훑어보는 데 도움이 된다.

KRDS 가이드

기본 ​

label로 펼침 버튼 문구를 주고, 펼침 상태는 [(expanded)]로 주고받습니다. 버튼은 aria-expanded·aria-controls로 콘텐츠 영역과 연결되고, 접혀 있는 동안 콘텐츠 영역은 inert로 초점과 보조기기 대상에서 제외됩니다.

ts
import { Component, signal } from '@angular/core'
import { KrdsDisclosure } from '@krds.ui/angular'

@Component({
  selector: 'demo-disclosure-basic',
  imports: [KrdsDisclosure],
  template: `
    <krds-disclosure label="신청 서비스안내" [(expanded)]="expanded">
      <ul class="krds-info-list dash">
        <li>하나의 아이디로 안전하고 편리하게 여러 전자정부 서비스를 이용할 수 있는 서비스입니다.</li>
        <li>디지털원패스 이용문의 : 1533-3713 (평일9~18시, 공휴일제외)</li>
      </ul>
    </krds-disclosure>
  `
})
export default class DisclosureBasic {
  readonly expanded = signal(false)
}

KrdsDisclosure ​

선택자 krds-disclosure

Inputs

이름타입기본값설명
label (필수)string-펼침 버튼 문구 (title 속성은 기본 툴팁이 되므로 label로 받음)
[(expanded)]booleanfalse펼침 여부