이 기사는 무엇입니까?

Vue.js (Nuxt.js) 용 Material Design 프레임 워크 중 하나는 "Vuetify"입니다.
이 기사에서는 자신을 위해 개조한 Vuetify 컴포넌트를 수시로 정리해 나갈 예정입니다.

만일 「나도 사용해 보고 싶어」라고 하는 분이 계시면, MIT License 의 권리내에서 자유롭게 이용해 주세요.

작동 확인된 환경

[email protected]

[email protected]

//[email protected] 그리고 움직이지 않는 것 같았기 때문에 확인하지 않으면 ...

간단한 버튼으로 파일 업로드

<v-btn> 바로 뒤에 <input type="file" style="display: none">를 쓸 수 있습니다.
Button 스타일은 좋아합니다.

See the Pen Vuetify - Custom file upload button by blachocolat ( @blachocolat )
on CodePen .

슬라이더 틱을 활성/비활성으로 표시

공식의 Ticks labels 을 근거로, 현재의 값이 어느 위치에 있는지를 보기 쉽게 한 느낌.

thumb 아이콘은 덤입니다.

See the Pen Vuetify - Custom slider with active/inactive styled ticks by blachocolat ( @blachocolat )
on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>