gluestack style 다운로드 - gluestack style 소스 코드 다운로드

gluestack style

AI 소스 코드

@gluestack-style

다운로드

⛔️은 감가 상각됩니다

우리는이 저장소를 사용하지 않고 코드베이스를 새로운 모노 리포지토리 구조로 마이그레이션했습니다.이 링크를 따라 최신 업데이트 및 기능에 액세스하십시오.

React에서 CSS를 사용할 수있는 라이브러리 및 현대적이고 강력하며 유연한 방법으로 기본 프로젝트를 반응 할 수 있습니다. gluestack-style 사용하면 JavaScript를 사용하여 CSS를 쓸 수 있으므로 두 언어의 힘과 표현력을 활용할 수 있습니다. 간단하고 직관적 인 API를 사용하면 동적 스타일, 반응 형 디자인 및 응용 프로그램의 테마를 쉽게 만들 수 있습니다.

선적 서류 비치

https://gluestack.io/style/docs/getting-started/installation 웹 사이트에서 소품 및 예 목록을 포함하여 각 구성 요소에 대한 자세한 설명서를 찾을 수 있습니다.

특징

동적 스타일 : JavaScript 표현식을 사용하여 구성 요소의 상태를 기반으로 변경되는 동적 스타일을 만들 수 있습니다.
SSR (Server-Side Rendering) 지원 : 서버 및 클라이언트에서 동일한 스타일을 사용할 수 있으므로 React 응용 프로그램에 대한 SSR을 쉽게 구현할 수 있습니다.
반응 형 스타일링 :: 이를 통해 다양한 화면 크기와 해상도에 적응하는 반응 형 스타일을 쉽게 만들 수 있습니다.
테마 지원 : 응용 프로그램의 다른 테마를 쉽게 정의하고 전환하여 모든 페이지에서 일관된 디자인을 허용 할 수 있습니다.
빈번한 업데이트 : 우리는 도서관을 개선하고 새로운 구성 요소를 추가하기 위해 지속적으로 노력하고 있습니다. Github에서 우리를 팔로우하여 최신 릴리스 및 기능을 최신 상태로 유지하십시오.
커뮤니티 지원 : 도서관을 사용하는 데 도움이 필요하거나 새로운 기능에 대한 제안이 필요하십니까? 불화 채널에 가입하여 커뮤니티와 연결하고 지원을 받으십시오.

`gluestack-style` 설치

gluestack-style 사용하려면 @gluestack-style/react 패키지 및 피어 종속성을 설치하기 만하면됩니다.

$ yarn add @gluestack-style/react

# or

$ npm i @gluestack-style/react

기술 스택

JavaScript, React, React Native Styled System

용법

프로젝트에서 gluestack-style 사용하려면 다음을 수행하십시오.

@gluestack-style/react 에서 제공하는 StyledProvider 로 응용 프로그램을 감싸십시오.

 import { StyledProvider } from '@gluestack-style/react' ;

// Do this at the root of your application
function App ( { children } ) {
  return < StyledProvider > { children } </ StyledProvider > ;
}

이제 라이브러리에서 제공 한 styled 기능을 사용하여 @gluestack-style/react 사용하여 구성 요소를 스타일링 할 수 있습니다. 예를 들어:

 import React from 'react' ;
import { styled , StyledProvider } from '@gluestack-style/react' ;

const StyledButton = styled (
  Pressable ,
  {
    bg : '$red500' ,
    p : '$3' ,
  } ,
  { }
) ;

const StyledButtonText = styled ( Text , { } , { } ) ;

export const App = ( ) => {
  return (
    < StyledProvider >
      < StyledButton >
        < StyledButtonText > Button </ StyledButtonText >
      </ StyledButton >
    </ StyledProvider >
  ) ;
} ;