تنزيل gluestack style - تنزيل رمز مصدر gluestack style

gluestack style

كود الذكاء الاصطناعي

@gluestack-style

تنزيل

⛔ إهمال

لقد قمنا بإهمال هذا المستودع وقمنا بترحيل قاعدة كودنا إلى بنية مستودع أحادي جديد ، يرجى اتباع هذا الرابط للوصول إلى أحدث التحديثات والميزات لدينا.

مكتبة تتيح لك استخدام CSS في React ورد المشاريع الأصلية بطريقة حديثة وقوية ومرنة. تتيح لك gluestack-style كتابة CSS باستخدام JavaScript ، والتي تمكنك من الاستفادة من قوة وتعبير كلتا اللغتين. من خلال واجهة برمجة تطبيقات بسيطة وبديهية ، يمكنك بسهولة إنشاء أنماط ديناميكية وتصميم مستجيب ومعالجة السمات لتطبيقاتك.

الوثائق

يمكنك العثور على وثائق مفصلة لكل مكون ، بما في ذلك قائمة من الدعائم والأمثلة ، في موقع https://gluestack.io/style/docs/getting-started/installation.

سمات

الأنماط الديناميكية: باستخدام تعبيرات JavaScript ، يمكنك إنشاء أنماط ديناميكية تتغير بناءً على حالة مكوناتك.
دعم تقديم جانب الخادم (SSR): يتيح لك ذلك استخدام نفس الأنماط على الخادم والعميل ، مما يجعل من السهل تنفيذ SSR لتطبيقات React ..
التصميم المتجاوب :: هذا يتيح لك إنشاء أنماط سريعة الاستجابة تتكيف مع أحجام وقرارات الشاشة المختلفة.
دعم السمة: يمكنك بسهولة تحديد وتبديل الموضوعات المختلفة لتطبيقك ، مما يسمح بتصميم ثابت عبر جميع الصفحات.
التحديثات المتكررة: نعمل باستمرار على تحسين المكتبة وإضافة مكونات جديدة. تابعنا على Github للبقاء على اطلاع على أحدث الإصدارات والميزات.
دعم المجتمع: هل تحتاج إلى مساعدة في استخدام المكتبة أو لديك اقتراح لميزة جديدة؟ انضم إلى قناة Discord للتواصل مع المجتمع والحصول على الدعم.

تثبيت `gluestack-style`

لاستخدام gluestack-style ، كل ما عليك فعله هو تثبيت حزمة @gluestack-style/react وتبعيات الأقران:

$ yarn add @gluestack-style/react

# or

$ npm i @gluestack-style/react

مكدس التكنولوجيا

JavaScript ، React ، React Native ، System System

الاستخدام

لاستخدام gluestack-style في مشروعك ، اتبع الخطوات هذه:

لف التطبيق الخاص بك مع StyledProvider المقدمة من @gluestack-style/React .

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

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

يمكنك الآن استخدام @gluestack-style/react to Style Components باستخدام الوظيفة 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 >
  ) ;
} ;