gluestack styleダウンロード-Gluestack gluestack styleソースコードのダウンロード

gluestack style

AI ソースコード

@gluestack-style

ダウンロード

deepremated

このリポジトリを廃止し、コードベースを新しいモノリポジトリ構造に移行しました。このリンクに従って最新の更新と機能にアクセスしてください。

あなたがあなたの反応でCSSを使用し、現代的で強力で柔軟な方法でネイティブプロジェクトを反応させることを可能にするライブラリ。 gluestack-style使用すると、JavaScriptを使用してCSSを作成できます。これにより、両方の言語のパワーと表現力を活用できます。シンプルで直感的なAPIを使用すると、ダイナミックなスタイル、レスポンシブデザイン、アプリケーションのテーマを簡単に作成できます。

ドキュメント

https://gluestack.io/style/docs/getting-started/installation Webサイトで、小道具や例のリストを含む各コンポーネントの詳細なドキュメントを見つけることができます。

特徴

動的スタイル： 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 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 > ;
}

これで、 @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 >
  ) ;
} ;