gluestack style下載-Gluestack gluestack style源代碼下載

gluestack style

Ai源碼

@gluestack-style

下載

⛔queed

我們已經棄用了該存儲庫，並將代碼庫遷移到新的單聲道存儲庫結構，請按照此鏈接訪問我們的最新更新和功能。

一個庫，允許您以現代，強大和靈活的方式在React和React項目中使用CSS。 gluestack-style允許您使用JavaScript編寫CSS，這使您可以利用兩種語言的能力和表現力。憑藉其簡單而直觀的API，您可以輕鬆地創建動態風格，響應式設計並為您的應用程序處理主題。

文件

您可以在https://gluestack.io/style/docs/getting-started/installation網站中找到每個組件的詳細文檔，包括道具和示例列表。

特徵

動態樣式：使用JavaScript表達式，您可以根據組件的狀態創建動態樣式。
服務器端渲染（SSR）支持：這使您可以在服務器和客戶端上使用相同的樣式，從而易於為您的React應用程序實現SSR。
響應式樣式::這使您可以輕鬆地創建適應不同屏幕尺寸和分辨率的響應式樣式。
主題支持：您可以輕鬆地定義和在應用程序的不同主題之間切換，從而允許在所有頁面上進行一致的設計。
頻繁更新：我們一直在努力改進庫和添加新組件。在Github上關注我們，以了解最新的版本和功能。
社區支持：需要使用圖書館的幫助還是對新功能有建議？加入我們的Discord頻道，與社區建立聯繫並獲得支持。

安裝`gluestack-style`

要使用gluestack-style ，您需要做的就是安裝@gluestack-style/react軟件包及其同行依賴性：

$ yarn add @gluestack-style/react

# or

$ npm i @gluestack-style/react

技術堆棧

JavaScript，React，React本地，樣式系統

用法

要使用項目中的gluestack-style ，請按照以下步驟操作：

用@gluestack風格/react提供的StyledProvider包裹您的應用程序。

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

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

現在，您可以使用@gluestack-style/react來通過使用圖書館提供的styled功能來樣式組件。例如：

 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 >
  ) ;
} ;