728x90 반응형 Stencil6 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+html] <picture>의 사용 의 사용법은 다음과 같다 [stencil] [html] stencil 에서 사용이 html과 다른 점이 있다면 srcset 을 srcSet으로 표기한다는 점입니다. picture 태그사용의 이점 태그는 태그를 이용한 반응형 이미지를 사용함으로써 대역폭을 절약하고 페이지 로드 시간 단축을 위한 목적으로 사용합니다. 2024. 1. 17. [Stencil]토글가능한 Expander UI만들기 Watch 를 이용해 isOpen의 값 변화를 주어 Expander 를 만들어 보겠습니다. button 마크업에 onclick 이벤트로 expanderClick 함수를 호출하였고, isOpen의 값을 변경하였습니다. Watch에서 값 변경을 인식하여 현재 컴포넌트의 상태값을 변경해주는 로직입니다. import { Component, Host, h, Prop, Watch, Element } from '@stencil/core'; @Component({ tag: 'td-expander', styleUrl: 'td-expander.less', shadow: true, }) export class TdExpander { @Prop() itemType: string; @Prop() panelId: string; .. 2024. 1. 4. [Stencil]컴포넌트 구성 셋 컴포넌트 사용 class 값과 text를 인자로 받는 간단한 컴포넌트를 생성해봅시다. 인자 값을 받기 위해 스텐실에 내장된 Prop를 임포트해주고, tdList 클래스 내부에 text와 class를 문자열로 선언해줍니다. render되는 마크업에 Prop로 선언된 요소를 this를 붙여 배치 시킵니다. import { Component,h,Prop } from '@stencil/core'; @Component({ tag: 'td-list', styleUrl: './td-list.css', shadow: true }) export class tdList { @Prop() text: string ; @Prop() class: string ; render() { return ( {this.text} ); } .. 2024. 1. 3. [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 반응형
