본문 바로가기
반응형

분류 전체보기98

방향에 따른 툴팁 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.
switch on off checkbox radio 스위치 only css https://www.jqueryscript.net/demo/jQuery-Plugin-For-Sliding-Toggle-Switches-LC-Switch/1. 스위치 기본형2. 스위치 텍스트형3. 스위치 와이드형4. 스위치 라디오형 *스위치에 가상태그를 써서 하는경우도 있는데 텍스트가 다른걸로 추가되는 경우도 있어서화면에 보이게 뿌려주는게 좋을꺼 같다 See the Pen switch 스위치 checkbox, radio type, 텍스트포함형 공통 by uni (@agosto) on CodePen. 2024. 7. 30.
반응형

티스토리툴바