본문 바로가기
반응형

vuetify7

[Vuetify] 데이터 테이블 헤더 show/hide 환경 - Vuetify2 데이터 테이블 헤더부분을 활성화, 비활성화해주는 예제입니다. headers: [ { text: 'Dessert (100g serving)', value: 'name', align: '', show: true }, { text: 'Calories', value: 'calories', align: '', show: true }, { text: 'Fat (g)', value: 'fat', align: '', show: true }, { text: 'Carbs (g)', value: 'carbs', align: '', show: true }, { text: 'Protein (g)', value: 'protein', sortable: true, align: '', show: true },.. 2021. 6. 12.
[Vuetify] 자주 사용하는 색상 네이밍 지정하기 src/plugins/vuetify.ts import Vue from 'vue'; import Vuetify from 'vuetify/lib'; import 'material-design-icons-iconfont/dist/material-design-icons.css'; import colors from 'vuetify/lib/util/colors'; Vue.use(Vuetify); export default new Vuetify({ theme: { themes: { light: { RED: '#fc3d5d', BLUE: '#348ed8', }, }, }, }); vuetify 설정파일에 theme.themes.light 밑에 '사용할 이름': '색상' 으로 선언해주면 색상을 네이밍으로 편하게 사용 할.. 2020. 10. 13.
[Vuetify] 메뉴 만들기 (With Vuex) 환경 - Node v10.16.0 - Vuetify2 Vuetify와 Vuex를 사용하여 2뎁스까지 지원하는 메뉴 체계를 작성해 보았습니다. 화면구성 Menus.vue : 메뉴 출력 및 동작 컴포넌트 PageTitle.vue : 페이지 타이틀 아이콘/이름 출력 컴포넌트 Index.vue : 라우터로 이동될 페이지 메뉴 이동에따라 화면을 전환하고 PageTItle내용을 수정해 주겠습니다. Index.vue (메뉴설정) 부분에는 메뉴 색상 및 메뉴 추가, 삭제 기능이 있습니다. store/state/color.js const colorState = { colors: { menu_background_color: '#263238', menu_selected_color: 'red', } } export defau.. 2020. 7. 13.
[Vuetify] DatePicker + TimePicker 환경 - Node v10.16.0 - Vuetify2 날짜와 시간을 함께 선택 하여 사용하고 싶어서 Vuetify에 Date Picker와 TimePicker 예제를 합쳐 보았습니다. (2020-07-13 12:37) 와 같은 형식의 산출물 Page.vue DateTimePicker 컴포넌트를 불러옵니다. DateTimePicker.vue Cancel OK Cancel OK set() 함수에서 2020-07-16 04:22 형식으로 date 변수에 담깁니다. 참고 자료 https://vuetifyjs.com/ko/components/date-pickers/ Date picker component — Vuetify.js The date picker component is a stand-alone inter.. 2020. 7. 13.
[Vuetify] Data table 무한뎁스 처리 환경 - Node v10.16.0 - Vuetify2 이번 예제는 Vuetify Data table의 expandable-rows의 응용버전이다. 테이블 row 우측의 화살표를 누르면 Peek-a-boo! 내용이 펼쳐지는데, 이 안쪽 내용을 무한뎁스로 처리해 보았다. 기괴한 모양이 되었다....; 테이블 구분을위해 vue-randomcolor를 사용했다. List.vue 기존 Peek-a-boo! 자리에 재귀함수처럼 나 자신을 계속 호출해주는 List.vue를 삽입해주었다. 이때 주의할 점은 name 옵션의 이름과 compntents의 이름이 일치해야 된다. 이 규칙이 어긋나면 아래와같은 오류를 뿜게된다. 전체 소스는 아래 git주소에서 확인 가능합니다. https://vuetifyjs.com/en/co.. 2020. 2. 13.
[Vuetify] 다중 업로드 모달창 만들기 환경 - Node v10.16.0 - Vuetify2 Vuetify의 Dialog와 vue-upload-component 라이브러리를 활용해서 다중 업로드 모달창을 만들어 봤다. (※개인적으로 팝업/모달 이라고 부르는데 뷰티파이에서는 다이얼로그 라고 표현하여 본 게시물에서는 Dialog로 통일하겠다.) 1. Page.vue - Dialog를 열기위한 버튼영역 cloud_upload Upload 2. Page.vue - Dialog 영역 cloud_upload 파일 업로드 clear 3. Page.vue - Script 영역 import Upload from "./Upload.vue"; export default { components: { Upload }, data: ()=> ({ dialog: fals.. 2020. 1. 18.
Vuetify 연습장 Vuetify는 bootstrap같은 UI 프레임 워크이다. Vue + Beautify의 합성어로 'Vue를 아름답게 하다.' 라는 뜻을 가지고있다고 한다. Vuetify공식 홈페이지에 나와있는 예제를 간단하게 연습해가며 채워가보도록 하겠다. Vuetify공홈 https://vuetifyjs.com/en/introduction/why-vuetify Why Vuetify? — Vuetify.js Vuetify has an extremely active community, provides easy to use Material Design components and is consistently updated. vuetifyjs.com Vuetify CND으로 시작하기 https://vuetifyjs.com/e.. 2020. 1. 11.
반응형

티스토리툴바