부식성 구성 요소: qwik용 새 구성 요소 라이브러리

부식성 부품이 필요한 이유

성능에 열정적인 웹 개발자로서 저는 Qwik의 재개 가능 특성을 최대한 활용하는 구성 요소 세트를 원했습니다. 이것이 바로 제가 기능이 완벽하고 사용하기 쉬우며 다른 패키지와 독립적인 고성능 대화형 UI를 손쉽게 구축할 수 있도록 Qwik용으로 맞춤 제작된 라이브러리인 부식성 구성 요소를 만든 이유입니다.

부식성 구성 요소

NPM 또는 Bun을 통한 설치

npm 또는 bun을 사용하여 Crossive Components 라이브러리를 설치할 수 있습니다. 프로젝트 디렉터리에서 다음 명령을 실행하세요.

npm 크로스시브 구성 요소 설치

crossive 구성요소 설치

useStyles(DefaultResources) 또는 useStyles(DefaultDarkResources)와 함께 useStyles(DefaultStyle)를 루트 레이아웃 요소에 추가하여 스타일을 적용하세요.

import {
  DefaultResources, // or(DefaultDarkResources)
  DefaultStyle,
} from 'corrosive-components'

export default component$(() => {
  useStyles$(DefaultResources) // or(useStyles$(DefaultDarkResources))
  useStyles$(DefaultStyle)

  return (
    // content
  )
})

자세한 내용은 설치 가이드를 확인하세요

구성 요소 소스 코드 직접 복사

패키지를 설치하지 않으려면 개별 구성 요소의 소스 코드와 해당 스타일을 직접 복사하여 프로젝트에 사용할 수 있습니다.

루트 레이아웃 요소에 DefaultResources 또는 DefaultDarkResources를 추가해야 합니다.
스타일링 개요

부식성 구성 요소의 스타일은 변수를 포함하는 리소스와 일반 스타일을 포함하는 스타일의 두 부분으로 구성됩니다.

기본 스타일은 DefaultStyle이고 리소스는 인라인 CSS 파일로 컴파일된 DefaultResources 및 DefaultDarkResources입니다.

자세한 내용은 스타일링 가이드를 확인하세요

부식성 부품

이 글은 부식성 부품의 개발자이자 유지관리자인 Mahdi Movahedian Atar가 작성했습니다.

위 내용은 부식성 구성 요소: qwik용 새 구성 요소 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!