Alert 경고

정적인 의미 경고 막대입니다. 네 가지 타입, 아이콘, 플레인 스타일, 닫기 가능을 지원합니다.

경고

<template>
  <div class="demo-col" style="max-width: 520px; gap: 12px">
    <LhAlert type="info" title="소장 공지" show-icon>계산행려도 디지털 고화질 버전이 공개되었습니다. 감상해 보세요.</LhAlert>
    <LhAlert type="success" title="채집 완료" show-icon closable>120점의 송나라 그림 고화질 채집 아카이빙이 완료되었습니다.</LhAlert>
    <LhAlert type="warning" title="색보정 편차" show-icon plain closable>3곳의 색값이 기준을 벗어났습니다. 재확인을 권장합니다.</LhAlert>
    <LhAlert type="danger" :title="titleText" closable :close-label="closeLabel">
      아이콘 없음 + 닫기 버튼의 사용자 정의 접근성 이름.
    </LhAlert>
    <LhAlert type="info" plain>텍스트 전용 플레인 스타일(plain), 제목 없음.</LhAlert>
  </div>
</template>

<script>
export default {
  data: () => ({
    titleText: '심사 반려',
    closeLabel: '이 경고 닫기',
  }),
}
</script>

Props

프로퍼티	설명	타입	기본값
type	의미 타입	'info' \| 'success' \| 'warning' \| 'danger'	'info'
title	제목 (title 슬롯도 사용 가능)	string	—
closable	닫기 가능 여부	boolean	false
showIcon	의미 아이콘 표시 여부	boolean	false
plain	밝은 플레인 스타일 여부	boolean	false
closeLabel	닫기 버튼의 접근성 이름 (미전달 시 언어 팩 alert.close 사용)	string	—
sx	sx 레이아웃 단축 프로퍼티	—	—

Slots

슬롯	설명
title	제목 영역 (기본값 title prop)
default	본문 설명