경고창 (Alert)

v-alert 컴포넌트 중요한 정보를 유저에게 전하는데 쓰입니다. 다음의 4가지 종류가 있습니다; success, info, warning 그리고 error. 기본 아이콘은 각기 다른 동작(Action)을 나타내고, 바꿀 수 있습니다.

사용법

Alerts can have a contextual color and are hidden by default.


API

v-alert
이름
color
디폴트
undefined
타입
string

컨트롤에 색상을 지정

이름
dismissible
디폴트
false
타입
boolean

Specifies that the Alert can be closed

이름
icon
디폴트
undefined
타입
string

Designates a specific icon

이름
mode
디폴트
undefined
타입
string

트랜지션 모드를 설정(transition-group 에는 적용되지 않음)

이름
origin
디폴트
undefined
타입
string

트랜지션 중심(origin)을 설정

이름
outline
디폴트
false
타입
boolean

Alert will have an outline

이름
transition
디폴트
undefined
타입
string

컴포넌트 트랜지션을 설정. 내장 트랜지션과 사용자 트랜지션 모두 가능

이름
type
디폴트
undefined
타입
string

Specify a success, info, warning or error alert. Uses the contextual color and a pre-defined icon.

이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

예제

닫기 (Closable)

v-model을 사용하여 경고창(Alert)의 상태(state)을 조절할 수 있습니다. 만약 v-model을 설정하지 않고 단지 경고창을 보여주기만 원한다면, 단순하게 value prop 을 설정하세요. (역주: v-model은 내부적으로 value prop을 사용합니다.)


커스텀 아이콘 또는 아이콘 없애기 (Custom Icon / No Icon)

쉽게 아이콘을 변경하거나 아예 없앨 수 있습니다.


디스플레이 트랜지션 (Display transition)

경고창을 보여주거나 숨길 때 커스텀 트랜지션을 적용할 수 있습니다.


테두리 강조 (Outline)

테두리가 강조된 경고창(Outline Alert)의 테두리(Border) 색은 현재 적용된 색상으로 부터 상속됩니다.