react lite ui

React Lite UI

Набор компонентов реагирования легкого веса, которые легко настраиваются и могут быть загружены в вашем проекте.

Ключевые функции • Установка • Использование • Документация • Демонстрация

Ключевые функции:

• Любой элемент DOM может быть настроен через простой файл SASS. ?

• Вы можете импортировать отдельные компоненты, которые не влияют на размер пакета вашего приложения. ?

• Чистый дизайн с минимальной реализацией, уменьшая код, который отправляется в ваше приложение с помощью приятного пользовательского интерфейса. ?

• Каждый компонент сделан легким - примерно вдвое меньше компонентов (и даже меньше!) Из других популярных библиотек. ?

? Установка:

 npm install --save react-lite-ui

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

В вашем App.js :

 import React from 'react' ;
import ReactDOM from 'react-dom' ;
import { Card } from 'react-lite-ui' ;

class App extends React . Component {
      render ( ) {
        return (
          < Card
            header = "Card header"
          >
            Card content
          </ Card >
        ) ;
      }
    }

ReactDOM . render (
    < App /> ,
    document . getElementById ( 'root' )
) ;

? Настройка:

Давайте возьмем наш файл App.js и добавим в него компонент карты:

 import React from 'react' ;
import ReactDOM from 'react-dom' ;
import { Card } from 'react-lite-ui' ;

class App extends React . Component {
      render ( ) {
        return (
          < Card
            header = "Am I Cute?"
            footer = {
              < Button href = "https://github.com/Codebrahma/react-lite-ui" type = "primary" bordered > view more </ Button >
            }
            elevation = "medium"
          >
            < div className = "col card-content" >
              < img src = "https://placeimg.com/300/300/animals" alt = "animals" />
            </ div >
          </ Card >
        ) ;
      }
    }

ReactDOM . render (
    < App /> ,
    document . getElementById ( 'root' )
) ;

Создайте файл с именем theme.scss :

:local( .card ) {
      z-index : 2 ;
      height : fit-content ;
      width : 100 % ;
      transition : margin 0.2 s ease-in-out ;
}
    
:local( .cardHeader ) {
      color : #0c549c ;
      text-align : center ;
}
    
:local( .cardFooter ) {
      justify-content : center ;
      align-self : baseline ;
}

Не волнуйтесь, если это не имеет смысла для вас. На данный момент мы добавим эти стили и завершим проводку наши стили в компонент карты.

Теперь, в нашем файле App.js мы передадим theme предложения в компонент Card , например:

 import React from 'react' ;
import ReactDOM from 'react-dom' ;
import { Card } from 'react-lite-ui' ;
import theme from 'theme.scss' ;  // Import the styles from theme.scss

class App extends React . Component {
      render ( ) {
        return (
          < Card
            theme = { theme }       // Pass the theme as a prop to the card component here.
            header = "Am I Cute?"
            footer = {
              < Button href = "https://github.com/Codebrahma/react-lite-ui" type = "primary" bordered > view more </ Button >
            }
            elevation = "medium"
          >
            < div className = "col card-content" >
              < img src = "https://placeimg.com/300/300/animals" alt = "animals" />
            </ div >
          </ Card >
        ) ;
      }
    }
    
 . . .

Итак, давайте посмотрим на то, что мы сделали здесь:

• Мы определили наши собственные стили, которые мы хотели бы настроить для компонента, используя классы card , cardHeader и cardFooter .

• Затем мы передали стили компоненту через предложение theme , которая применяется к структуре компонента.

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

Это все, что вам нужно сделать! А вот наш индивидуальный компонент карты:

Довольно легко, верно? Хотите попробовать больше компонентов?

Просто посетите нашу страницу Playground, чтобы попробовать компоненты, прежде чем использовать, и повеселитесь, играя с ними!

Вклад:

Если вы хотите внести свой вклад, посмотрите на наши рекомендации по взносу и поднимите PR! Мы хотели бы взносов!

Если вы найдете проблему или у вас есть вопрос, пожалуйста, откройте здесь проблему, и мы хотели бы помочь вам и продолжать улучшать эту библиотеку! ?

Спасибо!

Участники: