경고창 (Alert)
v-alert 컴포넌트 중요한 정보를 유저에게 전하는데 쓰입니다. 다음의 4가지 종류가 있습니다; success, info, warning 그리고 error. 기본 아이콘은 각기 다른 동작(Action)을 나타내고, 바꿀 수 있습니다.
API
컨트롤에 색상을 지정
Specifies that the Alert can be closed
Designates a specific icon
트랜지션 모드를 설정(transition-group 에는 적용되지 않음)
트랜지션 중심(origin)을 설정
Alert will have an outline
컴포넌트 트랜지션을 설정. 내장 트랜지션과 사용자 트랜지션 모두 가능
Specify a success, info, warning or error alert. Uses the contextual color and a pre-defined icon.
표시여부를 조절 (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) 색은 현재 적용된 색상으로 부터 상속됩니다.