Chakra UI Svelte 발표

소개

저는 4월 건물의 더 나은 부분인 날씬한 Chakra UI 구현을 공유하게 되어 매우 기쁩니다. 이것은 우리가 Chakra UI 에 대해 가지고 있는 것처럼 인기 있는 Vue 의 구현입니다. 현재 이에 대한 적절한 문서 작업을 하고 있습니다. 그러나 패키지는 Chakra UI React 스타일 가이드를 따릅니다.

차크라 UI란?

Chakra UI는 React 애플리케이션을 구축하는 데 필요한 빌딩 블록을 제공하는 단순하고 모듈식이며 액세스 가능한 구성 요소 라이브러리입니다. 나는 작년에 프레임워크를 처음 시도했을 때 Chakra UI와 사랑에 빠졌습니다. 호리호리한 연인이기 때문에 implementation in svelte을(를) 찾고 있었지만 아무것도 찾지 못했습니다. 그래서 나는 그것을 만들기 시작했습니다.

구성 요소를 테스트하고 스타일 관행을 확인하는 데 한 달이 걸렸습니다. 나는 또한 Chakra UI React source을 조사하고 있었다. 구현이 React와 매우 밀접하게 관련되기를 원했습니다. 그리고 현재 13개 정도의 구성 요소를 완성했습니다.

릴리스 정보

현재 안정적인 시험판 버전: 0.0.2-next.2

Github

NPM

Demo Website

시작하기

시작하려면 다음과 같이 패키지를 설치하기만 하면 됩니다.

pnpm i chakra-ui-svelte

선택적으로 svelte-icons 패키지를 설치할 수 있습니다. 지금까지 chakra-ui-svelte로 테스트한 유일한 아이콘 패키지입니다. 상당히 안정적이며 나중에 완전히 지원할 계획이 있습니다.

pnpm i svelte-icons

샘플 애플리케이션

샘플 앱을 만들어 볼까요?
먼저 테마 및 기타 전역 구성을 처리하는 ChakraProvider 구성 요소를 가져와야 합니다.

import { ChakraProvider } from 'chakra-ui-svelte';

이제 계속해서 공급자를 사용하여 기본적으로 chakra-ui-svelte가 제공하는 일부 저장소를 처리할 수 있습니다. 다른 패키지 가져오기

<script>
  import { Box, Button, ChakraProvider } from 'chakra-ui-svelte';
</script>

<ChakraProvider>
   <Box>Hello Box</Box>
   <Button> Hello Button </Button>
</ChakraProvider>

스타일링 구성 요소

Chakra Ui React에서와 마찬가지로 구성 요소를 사용자 지정할 수도 있습니다.

<script>
  import { Button, Icon } from 'chakra-ui-svelte';
  import FaGithub from "svelte-icons/fa/FaGithub.svelte";
</script>
<Button
    as="a"
    p="0"
    mx="3"
    size="xs"
    bg="transparent"
    href={"https://github.com/elcharitas/chakra-ui-svelte"}
    target="_blank"
    rel="noreferrer"
    ariaLabel="Chakra UI on Github"
    variant="ghost"
>
    <Icon as={FaGithub} />
</Button>

마지막 생각들?

안타깝게도 이 글을 쓰는 시점에는 적절한 문서가 없습니다. 그러나 데모를 사용할 수 있습니다here. 다음 주에 문서로 페이지를 업데이트할 예정입니다.
피드백을 남기고 자유롭게 패키지에 기여하십시오.

이 게시물이 처음 등장했습니다here.