ดาวน์โหลด gluestack style - ดาวน์โหลดซอร์สโค้ด gluestack style

gluestack style

โค้ดแหล่งที่มา AI

@gluestack-style

ดาวน์โหลด

⛔เลิกกิจการ

เราเลิกใช้ที่เก็บนี้และย้ายรหัสฐานของเราไปยังโครงสร้างที่เก็บโมโนใหม่โปรดติดตามลิงค์นี้เพื่อเข้าถึงการอัปเดตและคุณสมบัติล่าสุดของเรา

ห้องสมุดที่ให้คุณใช้ CSS ในโครงการ React และ React Native ด้วยวิธีที่ทันสมัยทรงพลังและยืดหยุ่น gluestack-style ช่วยให้คุณเขียน CSS โดยใช้ JavaScript ซึ่งช่วยให้คุณสามารถใช้ประโยชน์จากพลังและการแสดงออกของทั้งสองภาษา ด้วย API ที่เรียบง่ายและใช้งานง่ายคุณสามารถสร้างสไตล์แบบไดนามิกการออกแบบที่ตอบสนองและจัดการกับธีมสำหรับแอปพลิเคชันของคุณได้อย่างง่ายดาย

เอกสาร

คุณสามารถค้นหาเอกสารโดยละเอียดสำหรับแต่ละองค์ประกอบรวมถึงรายการอุปกรณ์ประกอบฉากและตัวอย่างใน 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, Styled 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 เพื่อจัดสไตล์ส่วนประกอบของคุณโดยใช้ฟังก์ 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 >
  ) ;
} ;

คำแนะนำเพิ่มเติมเกี่ยวกับวิธีการเริ่มต้นมีอยู่ที่นี่

การบริจาค

เรายินดีต้อนรับการมีส่วนร่วมใน gluestack-style ! หากคุณมีความคิดสำหรับส่วนประกอบใหม่หรือการแก้ไขข้อผิดพลาดโปรดอ่านคำแนะนำคำแนะนำการสนับสนุนของเราเกี่ยวกับวิธีการส่งคำขอดึง