gluestack style

⛔ Установилось

Мы установили этот репозиторий и перенесли нашу кодовую базу в новую структуру репозитория моно, пожалуйста, перейдите по этой ссылке, чтобы получить доступ к нашим последним обновлениям и функциям.

Библиотека, которая позволяет вам использовать CSS в вашем реагировании и реагировать нативные проекты современным, мощным и гибким способом. 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, стилизованная система

Использование

Чтобы использовать gluestack-style в вашем проекте, выполните следующие действия:

1. Оберните приложение 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 > ;
}

2. Теперь вы можете использовать @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 ! Если у вас есть идея для нового компонента или исправления ошибки, пожалуйста, прочитайте наши инструкции по внесению руководства о том, как отправить запрос на привлечение.

Лицензия

Лицензировано по лицензии MIT, Copyright © 2021 Geekyants. Смотрите лицензию для получения дополнительной информации.