728x90 반응형 webcomponents6 [stencil+html] <picture>의 사용 의 사용법은 다음과 같다 [stencil] [html] stencil 에서 사용이 html과 다른 점이 있다면 srcset 을 srcSet으로 표기한다는 점입니다. picture 태그사용의 이점 태그는 태그를 이용한 반응형 이미지를 사용함으로써 대역폭을 절약하고 페이지 로드 시간 단축을 위한 목적으로 사용합니다. 2024. 1. 17. [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]토글가능한 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. Webcomponents 에서 css사용 host가 open이라는 속성을 가질때 다음과 같이 정의한다. :host([open]) { display:block } host가 main이라는 클래스를 가지고, 내부 slot에 배치된 slot이라는 클래스개체의 스타일을 정의하고 싶을때는 다음과 같습니다. :host(.main){ background: blue; ::slotted(.slot){ background: red; } } host 내부 콘텍스트가 div에 스타일을 적용하고 싶을때는 다음과 같습니다. :host-context(div){ color:yellow; } 참 쉽죠? 2024. 1. 2. [Stencil]Stenciljs 프로젝트 시작하기 Stencil: 웹 구성 요소 컴파일러 Stencil은 Web components를 생성하는 컴파일러입니다. Stencil은 가장 널리 사용되는 프레임워크의 최고의 개념을 간단한 빌드 시간 도구로 결합합니다. Stencil은 TypeScript, JSX 및 CSS를 사용하여 고품질 구성 요소 라이브러리를 만드는 데 사용할 수 있는 표준 호환 웹 구성 요소를 만듭니다. Stencil로 생성된 Web components는 즉시 사용 가능한 인기 프레임워크와 함께 사용할 수 있습니다. 또한 Stencil은 프레임워크별 개발자 환경에서 Stencil 구성 요소를 사용할 수 있도록 하는 프레임워크별 래퍼를 생성할 수 있습니다. Stencil의 주요 목표는 디자인 시스템과 구성 요소 라이브러리를 위한 놀라운 도구.. 2024. 1. 2. 이전 1 다음 728x90 반응형
