목록과 아이콘 사용법

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

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

error: Content is protected !!