리스트와 아이콘 사용법

AppBar 메뉴 아이콘 v-app-bar 엘리먼트를 사용하여 AppBar를 사용할 수 있다. v-app-bar-nav-icon에서 메뉴 아이콘을, v-tools bar-title로 제목을 표기. 목록과 항목 HTML 목록은 ol, li 엘리먼트로 영역을 정하고 list 엘리먼트를 여러 개 사용하여 표시한다.vuetify도 비슷하다. 리스트를 사용할 때는 v-list 엘리먼트를, 자세한 내용은 v-list-item 엘리먼트를 사용한다.목록과 아이콘 하나의 목록 안에 아이콘을 넣고 싶다면 v-list-item-avatar 엘리먼트를 사용한다.이 엘리먼트는 아이콘의 원본 이미지를 변경하지 않고도 목록 항목에 가장 적합한 원형 디자인으로 바꾸어 표현해 준다. 목록과 그룹화 v-list-item-title 엘리먼트 다음으로 제목을 표현해 보았다. 앞에 아이콘 영역을 제외한 나머지 부분을 모두 확보하여 표현하기 위해 v-list-item-content 엘리먼트를 사용하였다. 그러면 목록 항목에서 사용할 수 있는 나머지 영역이 확보되어 자동으로 레이아웃을 갖추면서 제목이나 부제목을 표현할 수 있다.

v-list-item-action 엘리먼트에서 사용자가 원하는 목록 항목을 선택하면 그 다음 반응을 표현할 수 있다.버튼 스타일 항목의 오른쪽 화살표 버튼은 v-btn과 v-icon으로 만듭니다. keyboard_arrow_right는 화살표 모양을 의미한다.

인기글