KRDS Angular

긴급 공지 Critical alerts ​

긴급 공지는 본문 상단에 강조되어 표시되는 배너로 사용자에게 긴급하거나 중요한 정보를 전달하는 데 사용된다. 모든 공공 디지털 서비스에서 동일한 긴급 공지 컴포넌트를 사용함으로써 사용자는 긴급한 정보를 일관되고 예측 가능한 방식으로 찾고 이해할 수 있다.

KRDS 가이드

기본 ​

message로 공지 문구를 주고, linkHref를 지정하면 링크가 표시됩니다. 링크 문구(linkText, 기본 자세히 보기)는 768px 미만 화면에서 숨겨지고 화살표 아이콘만 남습니다. 화면낭독기는 화면 폭과 관계없이 링크 문구를 링크 이름으로 읽습니다.

ts
import { Component } from '@angular/core'
import { KrdsCriticalAlerts } from '@krds.ui/angular'

@Component({
  selector: 'demo-critical-alerts-basic',
  imports: [KrdsCriticalAlerts],
  template: ` <krds-critical-alerts type="danger" message="긴급 공지 내용 표시" linkHref="#" linkText="자세히 보기" /> `
})
export default class CriticalAlertsBasic {}

타입 ​

type에 따라 배지 문구가 danger는 긴급, ok는 안전, info(기본)는 안내로 표시됩니다.

ts
import { Component } from '@angular/core'
import { KrdsCriticalAlerts } from '@krds.ui/angular'

@Component({
  selector: 'demo-critical-alerts-types',
  imports: [KrdsCriticalAlerts],
  template: `
    <div style="display: flex; flex-direction: column; gap: 1rem">
      <krds-critical-alerts type="danger" message="긴급 공지 내용 표시" linkHref="#" />
      <krds-critical-alerts type="ok" message="안전 공지 내용 표시" linkHref="#" />
      <krds-critical-alerts type="info" message="안내 공지 내용 표시" />
    </div>
  `
})
export default class CriticalAlertsTypes {}

KrdsCriticalAlerts ​

선택자 krds-critical-alerts

Inputs

이름타입기본값설명
type'danger' | 'ok' | 'info''info'종류
message (필수)string-공지 문구
linkHrefstring-자세히 보기 링크 주소
linkTextstring'자세히 보기'자세히 보기 링크 문구 (모바일에서는 숨김)