Download gluestack style - Quellcode gluestack style herunterladen

gluestack style

AI-Quellcode

@gluestack-style

Herunterladen

⛔️ veraltet

Wir haben dieses Repository veraltet und unsere Codebasis in eine neue Mono -Repository -Struktur migriert. Befolgen Sie diesen Link, um auf unsere neuesten Updates und Funktionen zuzugreifen.

Eine Bibliothek, mit der Sie CSS in Ihren React- und React -nativen Projekten mit einer modernen, leistungsstarken und flexiblen Weise verwenden können. gluestack-style können Sie CSS mit JavaScript schreiben, mit dem Sie die Macht und Ausdruckskraft beider Sprachen nutzen können. Mit seiner einfachen und intuitiven API können Sie problemlos dynamische Stile erstellen, reaktionsschnelles Design und Themen für Ihre Anwendungen verarbeiten.

Dokumentation

Für jede Komponente finden Sie eine detaillierte Dokumentation für jede Komponente, einschließlich einer Liste von Requisiten und Beispielen, unter https://gluestack.io/style/docs/getting-started/installation Website.

Merkmale

Dynamische Stile: Mit JavaScript -Ausdrücken können Sie dynamische Stile erstellen, die sich basierend auf dem Status Ihrer Komponenten ändern.
Support Server-Side Rendering (SSR)
Responsive Styling :: Dadurch können Sie problemlos reaktionsschnelle Stile erstellen, die sich an verschiedene Bildschirmgrößen und -auflösungen anpassen.
Themenunterstützung: Sie können verschiedene Themen für Ihre Anwendung problemlos definieren und wechseln und ein konsistentes Design auf allen Seiten ermöglichen.
Häufige Updates: Wir arbeiten ständig daran, die Bibliothek zu verbessern und neue Komponenten hinzuzufügen. Folgen Sie uns auf Github, um über die neuesten Veröffentlichungen und Funktionen auf dem Laufenden zu bleiben.
Community -Unterstützung: Benötigen Sie Hilfe mit der Bibliothek oder haben Sie einen Vorschlag für eine neue Funktion? Schließen Sie sich unserem Discord -Kanal an, um sich mit der Community zu verbinden und Unterstützung zu erhalten.

Installation von `gluestack-style`

Um gluestack-style zu verwenden, müssen Sie lediglich das Paket @gluestack-style/react und seine Peer-Abhängigkeiten installieren:

$ yarn add @gluestack-style/react

# or

$ npm i @gluestack-style/react

Tech Stack

JavaScript, React, React Native, gestyltes System

Verwendung

Befolgen Sie die folgenden Schritte, um den gluestack-style in Ihrem Projekt zu verwenden:

Wickeln Sie Ihre Anwendung mit dem von @GluStack-Stil/React bereitgestellten StyledProvider .

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

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

Jetzt können Sie @gluestack-style/react um Ihre Komponenten mit der von der Bibliothek styled Funktion zu stylen. Zum Beispiel:

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

Weitere Anleitungen zum Einstieg finden Sie hier.

Beitragen

Wir begrüßen Beiträge zum gluestack-style ! Wenn Sie eine Idee für eine neue Komponente oder eine Fehlerbehebung haben, lesen Sie bitte unsere Anweisungen für die Anleitung zum Mitarbeitern zum Einreichen einer Pull -Anfrage.