Alert

Alert (경고 메시지)

출처: 문서

본문

Alert

중요한 경고 메시지를 표시해요.

기본 사용법

Alert 컴포넌트는 페이지 안에 있는 오버레이가 아닌 요소로, 자동으로 사라지지 않아요. Alert는 type으로 정의되는 5가지 테마를 제공하는데, 기본값은 info예요. primary는 2.9.11에 추가됐어요.

• Success alert
• Info alert
• Warning alert
• Error alert

.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}

테마

Alert는 light와 dark 두 가지 테마를 제공해요. effect를 설정해서 테마를 바꿔요. 기본값은 light예요.

닫기 버튼 커스터마이즈

닫기 버튼을 텍스트나 다른 기호로 커스터마이즈할 수 있어요. Alert는 닫을 수 있는지 여부를 설정할 수 있어요. 닫기 버튼 텍스트와 닫힘 콜백도 커스터마이즈할 수 있어요. closable 속성은 컴포넌트를 닫을 수 있는지 결정해요. boolean을 받고 기본값은 true예요. close-text 속성을 설정하면 기본 X 기호 대신 닫기 버튼을 바꿀 수 있어요. 주의할 점은 close-text는 반드시 string이어야 한다는 점이에요. 컴포넌트가 닫히면 close 이벤트가 실행돼요.

const hello = () => {
  // eslint-disable-next-line no-alert
  alert('Hello World!')
}

.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}

아이콘과 함께

아이콘을 표시하면 가독성이 좋아져요. show-icon 속성을 설정하면 현재 Alert type에 맞는 아이콘이 표시돼요. 또는 icon 슬롯으로 아이콘을 커스터마이즈할 수 있어요.

import { Bell } from '@element-plus/icons-vue'

.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}

텍스트 가운데 정렬

center 속성을 사용해서 텍스트를 가운데로 정렬해요.

설명과 함께

설명은 더 상세한 정보를 담은 메시지를 포함해요. 필수 속성인 title 외에 description 속성을 추가해서 alert를 더 자세히 설명할 수 있어요. description은 텍스트 문자열만 저장할 수 있고, 자동으로 줄바꿈돼요.

아이콘과 설명 함께

마지막으로, 아이콘과 설명을 모두 갖춘 예시예요.

.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}

Alert API

Attributes

Events

Slots

더 알아보기 (Learn more)