gluestack style

⛔️ Diusir

Kami telah mencela repositori ini dan memigrasikan basis kode kami ke struktur repositori mono baru, silakan ikuti tautan ini untuk mengakses pembaruan dan fitur terbaru kami.

Perpustakaan yang memungkinkan Anda menggunakan CSS dalam proyek React dan React asli Anda dengan cara modern, kuat dan fleksibel. gluestack-style memungkinkan Anda untuk menulis CSS menggunakan JavaScript, yang memungkinkan Anda untuk memanfaatkan kekuatan dan ekspresi kedua bahasa. Dengan API yang sederhana dan intuitif, Anda dapat dengan mudah membuat gaya dinamis, desain responsif, dan menangani tema untuk aplikasi Anda.

Dokumentasi

Anda dapat menemukan dokumentasi terperinci untuk setiap komponen, termasuk daftar alat peraga dan contoh, di https://gluestack.io/style/docs/getting-started/installation situs web.

Fitur

• Dynamic Styles: Menggunakan JavaScript Expressions, Anda dapat membuat gaya dinamis yang berubah berdasarkan keadaan komponen Anda.

• Dukungan Rendering Sisi Server (SSR): Ini memungkinkan Anda menggunakan gaya yang sama di server dan klien, membuatnya mudah untuk mengimplementasikan SSR untuk aplikasi React Anda ..

• Styling Responsif :: Ini memungkinkan Anda untuk dengan mudah membuat gaya responsif yang beradaptasi dengan berbagai ukuran layar dan resolusi.

• Dukungan Tema: Anda dapat dengan mudah mendefinisikan dan beralih di antara berbagai tema untuk aplikasi Anda, memungkinkan untuk desain yang konsisten di semua halaman.

• Perbarui yang sering: Kami terus berupaya meningkatkan perpustakaan dan menambahkan komponen baru. Ikuti kami di GitHub untuk tetap up-to-date pada rilis dan fitur terbaru.

• Dukungan Komunitas: Butuh bantuan menggunakan perpustakaan atau memiliki saran untuk fitur baru? Bergabunglah dengan saluran Discord kami untuk terhubung dengan komunitas dan mendapatkan dukungan.

Memasang gluestack-style

Untuk menggunakan gluestack-style , yang perlu Anda lakukan adalah menginstal paket @gluestack-style/react dan ketergantungan rekannya:

$ yarn add @gluestack-style/react

# or

$ npm i @gluestack-style/react

Tumpukan teknologi

JavaScript, React, React Native, System Style

Penggunaan

Untuk menggunakan gluestack-style dalam proyek Anda, ikuti langkah-langkah ini:

1. Bungkus aplikasi Anda dengan StyledProvider yang disediakan oleh @gluestack-style/react .

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

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

2. Sekarang Anda dapat menggunakan @gluestack-style/react to Style komponen Anda dengan menggunakan fungsi styled yang disediakan oleh perpustakaan. Misalnya:

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

Lebih banyak panduan tentang cara memulai tersedia di sini.

Berkontribusi

Kami menyambut kontribusi untuk gluestack-style ! Jika Anda memiliki ide untuk komponen baru atau perbaikan bug, silakan baca instruksi panduan berkontribusi kami tentang cara mengirimkan permintaan tarik.

Lisensi

Lisensi di bawah lisensi MIT, Hak Cipta © 2021 Geekyants. Lihat lisensi untuk informasi lebih lanjut.