728x90 반응형 stenciljs5 스텐실 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. [stencil] 에서 css연결하는 방법 stencil 에서 css연결하는 방법 단일 css가져오기 import { Component } from '@stencil/core'; @Component({ tag: 'ts-list', styleUrl: './ts-list.css', }) export class TsList { // implementation omitted } 여러 css를 가져오기 import { Component } from '@stencil/core'; @Component({ tag: 'ts-list', styleUrls: ['./ts-list-1.css', './ts-list-2.css'] }) export class TsList { // implementation omitted } 모드사용 import { Component }.. 2024. 1. 12. [Stencil]Web components API Web components API Stencil에서 제공하는 전체 API는 데코레이터, 수명 주기 후크 및 렌더링 방법 집합으로 압축될 수 있습니다. 데코레이터 데코레이터는 구성 요소에 대한 모든 메타데이터, 구성 요소가 노출할 수 있는 속성, 특성 및 메서드, 내보낼 수 있는 이벤트 또는 관련 스타일시트를 수집하기 위해 스텐실에서 사용하는 순수한 컴파일러 시간 구성입니다. 모든 메타데이터가 수집되면 모든 데코레이터가 출력에서 제거되므로 런타임 오버헤드가 발생하지 않습니다. @Component()는 새로운 웹 구성요소를 선언합니다. @Prop()은 노출된 속성/속성을 선언합니다. @State()는 구성 요소의 내부 상태를 선언합니다. @Watch()는 속성이나 상태가 변경될 때 실행되는 후크를 선언.. 2024. 1. 3. [Stencil]Stenciljs 프로젝트 시작하기 Stencil: 웹 구성 요소 컴파일러 Stencil은 Web components를 생성하는 컴파일러입니다. Stencil은 가장 널리 사용되는 프레임워크의 최고의 개념을 간단한 빌드 시간 도구로 결합합니다. Stencil은 TypeScript, JSX 및 CSS를 사용하여 고품질 구성 요소 라이브러리를 만드는 데 사용할 수 있는 표준 호환 웹 구성 요소를 만듭니다. Stencil로 생성된 Web components는 즉시 사용 가능한 인기 프레임워크와 함께 사용할 수 있습니다. 또한 Stencil은 프레임워크별 개발자 환경에서 Stencil 구성 요소를 사용할 수 있도록 하는 프레임워크별 래퍼를 생성할 수 있습니다. Stencil의 주요 목표는 디자인 시스템과 구성 요소 라이브러리를 위한 놀라운 도구.. 2024. 1. 2. 이전 1 다음 728x90 반응형
