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