Vuetify

상점

기업

v-alert 컴포넌트는 알맞은 아이콘과 색을 통해서 유저에게 정보를 전달할 수 있는 컴포넌트 입니다. 기본 타입은 success, info, warning 그리고 error 총 4가지로 구성되어 있습니다. 기본 아이콘은 서로 다른 행동임을 묘사 할 수 있도록 도와주는 아이콘으로 지정되어 있습니다. border, icon 그리고color` 등 경고창의 많은 부분들은 거의 모든 상황에 맞게 커스트마이징 할 수 있습니다.

가장 간단한 경고창은 flat한 sheets of paper 을 이용해 메시지를 보여주는 것 입니다.

Options

제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

type prop은 4개의 v-alert 스타일을 제공합니다. (success, info, warning, 그리고 error). 각각의 스타일은 기본적인 아이콘과 색깔이 제공됩니다. 기본적인 색깔들은 전역적인 설정에 따라 커스트마이징 가능합니다. Vuetify's theme.

border prop 을 추가하여 간단하게 경고창 4개면에 선을 추가할 수 있습니다. 이것은 color, dark 그리고 type 과 같은 props들과 조합되어 특별한 경고창에 특별한 강조를 줄 수 있습니다.

The colored-border prop removes the alert background in order to accent the border prop. If a type is set, it will use the types default color. If no color or type is set, the color will default to the inverted color of the applied theme (black for light and white/gray for dark).

dense prop 은 경고창의 높이를 줄여 경고창을 작고 컴팩트한 스타일로 만들어줍니다. border prop과 함깨 사용되면 스타일을 유지한 채 선의 길이를 최대한 줄일 수 있습니다.

dismissible prop 은 경고창에 닫기 버튼을 추가시킵니다. 이 버튼을 클릭하면 경고창의 변수가 'false' 로 지정되며 효과적으로 경고창을 숨깁니다. v-model 로 경고창을 연결 시킬 수 있으며 'true'로 값을 지정할 수 있습니다. 닫기 아이콘은 자동적으로 'aria-label'로 적용되며 이것은 close-label prop 또는 Locale Setting 에서 close 변수를 수정함으로써 바꿀 수 있습니다. 나만의 Locale Setting 법을 더 알고싶다면 Internationalization page. 를 방문해 주세요.

icon prop 은 경고창 시작부분에 아이콘을 추가시켜줍니다. 만약, type 이 제공되었다면, 기본 아이콘을 재정의 할 것입니다. 추가적으로 icon 버튼을 'false'로 지정한다면 아이콘을 제거할 것입니다.

outlined prop 은 color 에 따라서 경고창의 색깔과 테두리를 설정하고 배경색을 투명하게 설정합니다.

prominent prop 은 경고창의 높이를 증가시키고 아이콘에 강조를 줘서 더욱 강조시켜줍니다. 만약 prominentdense 를 같이 사용한다면, prominent 아이콘 효과가 적용된 보통 크기의 경고창이 생성됩니다.

text prop 은 color 에 따라 배경의 투명도를 조절하여 심플한 경고창을 만들어줍니다. 다른 props와 유사하게 textdense, **prominent 그리고 outlined 와 조합되어 나만의 개성있는 컴포넌트를 구현할 수 있습니다.

transition prop 은 경고창이 보이고 숨겨짐에 따라 트랜지션 효과를 적용해줍니다. 더욱 더 자세한 정보를 얻기 위해선 Vuetify's prebuilt transitions 또는 how to create your own 를 참고해 주세요.

By combining color, dismissible, closeIcon, border, elevation, icon, and colored-border props you can create stylish custom alerts such as this twitter notification.

By default, v-alert components are assigned the WAI-ARIA role of alert which denotes that the alert "is a live region with important and usually time-sensitive, information." When using the dismissible prop the close icon will receive a corresponding aria-label. This value can be modified by changing either the close-label prop or globally through customizing the Internationalization's default value for the close property.

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!