728x90 반응형 Web Component3 스텐실 stencil 반응형 이벤트 처리 스텐실 stencil 반응형 이벤트 처리하기 너무도 쉽죠 이제 stencil이 아니면 개발하기 어려울 정도에요 다음의 코드 하나로 쉽게 반응형을 완성하세요!! @Listen('resize', { target: 'window' }) onResize() { forceUpdate(this); } import {Component, Host, h, Prop,forceUpdate, Listen } from '@stencil/core'; 임포트는 필수인거 아시죠? 2024. 1. 25. stencil web component에서 iscroll 만들어보자 마우스다운이벤트를 발생시켜 드래그시작 지점을 할당합니다. @Listen('mousedown') mousedown(ev) { this.dragStart = ev.pageX; } 그리고 마우스업 이벤트를 발생시켜 드래그끝 지점을 할당합니다. @Listen('mouseup') mouseup(ev) { this.dragEnd = ev.pageX; } 시작값과 끝값을 계산하여 변수에 할당 합니다. let screenMove = this.dragStart - this.dragEnd; 그 값을 아래의 두 값과 함께 스크롤 이벤트에 할당합니다. this.positionValue = this.el.shadowRoot.querySelector('.iscroll__container').scrollLeft; 가로스크롤을 싸고.. 2024. 1. 24. web components :part() part의 값을 정의하여 사용하면 CSS가 ::part 요소를 통해 쉐도우 트리의 특정 요소를 선택하고 스타일을 지정할 수 있습니다. 하지만 사파리에서 호환이 어렵다는 문제가 있어요(exportparts) css는 다음과 같이 사용하고 :host{ &::part(part){ color:red; } } 웹컴포넌트에서 사용은 파트 버튼 아래와 같이 exportparts도 사용할 수 있지만 사파리에서 적용이 안됩니다. 쉐도우 돔 하위 요소의 스타일을 지정할 때 사용하지만 호환이 안된다는 단점이 있어서 사용을 안하고 있어요 파트 버튼 2024. 1. 3. 이전 1 다음 728x90 반응형
