KRDS Vue

긴급 공지 Critical alerts ​

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

KRDS 가이드

기본 ​

link-href를 지정하면 링크가 표시됩니다. 링크 텍스트(link-text)는 768px 미만 화면에서 숨겨지고 화살표 아이콘만 남습니다. 화면낭독기는 화면 폭과 관계없이 링크 텍스트를 링크 이름으로 읽습니다.

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

<template>
  <KrdsCriticalAlerts type="danger" message="긴급 공지 내용 표시" link-href="#" link-text="자세히 보기" />
</template>

타입 ​

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

  • 안내

    안내 공지 내용 표시

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

<template>
  <div style="display: flex; flex-direction: column; gap: 1rem">
    <KrdsCriticalAlerts type="danger" message="긴급 공지 내용 표시" link-href="#" />
    <KrdsCriticalAlerts type="ok" message="안전 공지 내용 표시" link-href="#" />
    <KrdsCriticalAlerts type="info" message="안내 공지 내용 표시" />
  </div>
</template>

KrdsCriticalAlerts ​

Props

이름타입기본값설명
typeAlertType'info'알림 타입
linkHrefstring-링크 URL
linkTextstring'자세히 보기'링크 텍스트
message (필수)string-알림 메시지

Events

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