전체 글69 레이어팝업 1. 템플릿 (template) 구성코드 스니펫 Show Default Popup Show Slide Up Popup Show Slide Down Popup Show Flip Popup 2. 스크립트 (script) 구성 아이디로 레이어팝업123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102template> transition :name="animationClass"> div v-.. 2024. 8. 2. 방향에 따른 툴팁 tooltip 방향에 다른 툴팁123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990template> div class="tooltip-container" @mouseenter="showTooltip" @mouseleave="hideTooltip"> slot>/slot> div class="tooltip" :class="computedClass" v-if="visible" > {{ text }} /div> /d.. 2024. 8. 2. 클릭시 상단 push vue3 script setup1. 하단 리스트의 목록에 한 아이템을 선택하면 상단에 그 아이템이 표시되고 목록에선 사라짐2. 상단에 아이템에 삭제를 선택하면 다시 목록으로 돌아감ref 로했을때https://vuetifyjs.com/en/components/chips/#custom-list Chip component — VuetifyThe chip component allows a user to enter information, make selections, filter content or trigger actions.vuetifyjs.com 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950.. 2024. 8. 2. vuetify3 클릭시 아이콘변경 show 구조 1. 아이콘 화살표 펼치기전/펼치기후2. 하단내용 디폴트값은 안보임 https://vuetifyjs.com/en/components/cards/#custom-actions 2024. 8. 2. v-model 1. 단방향==========>설치ref:value="selectValue"밸류값을 셀렉트밸류함수에 넣는다셀렉트가 동작했을때 셀렉트밸류에 넣어준다 2. 양방향 ==========>설치ref v-model= "selectValue" 이렇게 쓰기위해서는ref함수를 임포트 해주고그함수를 쓰겠다 하단에 적어준다 2024. 8. 1. 사람인 swiper 라운드 트렌지션 사람인 ui는 디자인이 너무 이쁜거같다디자인 개편하기 전에 미리 소스를 확인해봤다 ***********스와이퍼 현재 화면에서 활성화됐을때 글자박스가 밑에서 위로 올라오게#1. 스와이퍼 엑티브 되기전.platinum-plus .desc > * { opacity: 0; transform: translateY(25px); transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); } #2. 스와이퍼 엑티브됐을때.platinum-plus .slide.swiper-slide-active .desc > * { opacity: 1; transform: none; } 12345678910111213141516171819202122232425.. 2024. 7. 31. 이전 1 2 3 4 5 6 ··· 12 다음
