반응형 vue17 다중셀렉트 https://apollo.primevue.org/uikit/input 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293template> div> div v-for="(item, index) in items" :key="item.id" class="checkbox-item"> input type="checkbox" :id="item.id" :checked="item.checked" .. 2024. 9. 10. quasar flex기준 왼쪽 오른쪽일때 왼족 오른쪽 나뉠때 저 태그 하나만 넣어주면 flex-grow:1 =>내가 남은영역은 다 꽉채워주겠다! 라디오 사이에 간격q-gutter-sm => margin-top:-8px / margin-left:-8px q-gutter-sm > * => margin-top:8px / margin-left:8px 이미지 비율16:9 = > padding-bottom: 56.25% 1:1 = > padding-bottom: 100%; 4:3 => padding-bottom: 75%; 2024. 8. 5. :class 클래스를 바인더로 하면 value값으로 조정할수있다 2024. 8. 4. 레이어팝업 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. 이전 1 2 3 다음 반응형
