pk-rtu-mirea-ui-library v1.0.32

pk-rtu-mirea-ui-library

Library of UI components used for the site of the admissions office of RTU MIREA

This UI library was developed for using at sites of admission committee RTU MIREA. Here you can find different UI Components such as:

• Loading screen
• Button
• Text field
• Select dropdown
• Tag element
• Mobile Pop Up (beta)

Install

npm install --save pk-rtu-mirea-ui-library

Usage

After installation you can start create your amazing products. Here is the example:

import React from 'react'

import { Loading } from 'pk-rtu-mirea-ui-library'

const App = () => {
  return (
    <Loading fullscreen />
  )
}

Let's look at each component separately

Loading screen

This is a simple screen that can be displayed while loading data

Props

Example

import React from 'react'

import { Loading } from 'pk-rtu-mirea-ui-library'

const App = () => {
  return (
    <Loading text={"Please wait..."} fullscreen />
  )
}

Tag

This is a simple tag

Props

Example

import React from 'react'

import { Tag } from 'pk-rtu-mirea-ui-library'

const App = () => {
  return (
    <Tag 
      size={'small'}
      bgColor={"#000"}
      textColor={"#fff"}
      wordWrap
      fullWidth
    >
      <p>My Tag</p>
    </Tag>
  )
}

Button

This is button component

Props

Example

import React from 'react'

import { Button } from 'pk-rtu-mirea-ui-library'

const App = () => {
  return (
    <Button 
      size='small'
      bgColor='#000'
      textColor='#fff'
      onClick={() => { handleClear(); this.handleClearLocal(); }}
      disabled
      fullWidth
      fullHeight
    >
      <p>My Button </p>
    </Button>
  )
}

TextField

Props

Example

import React from 'react'

import { TextField } from 'pk-rtu-mirea-ui-library'

const App = () => {
  return (
    <TextField
      placeholder={"Поиск..."}
      size={"medium"}
      value={searchText}
      onChange={this.searchHandle}
      fullHeight
    />
  )
}

Select

Props

Bold is for required options

Example

import React, { useState } from 'react'

import { Select } from 'pk-rtu-mirea-ui-library'
import radio from "./img/radio.svg"
import it from './img/it.svg'
import chem from './img/chem.svg'
import law from './img/law.svg'

const List = [
  { id: 1, val: 'text 1' },
  { id: 2, val: 'text 2' },
  { id: 3, val: 'text 3' },
  { id: 4, val: 'text 4' }
]

const iconArray=[
  { id: 1, path: radio },
  { id: 2, path: it },
  { id: 3, path: chem },
  { id: 4, path: law }
]

const App = () => {
  const [object, setObject] = useState({})

  return (
    <Select
      placeholder={'Not selected...'}
      selectValue={object}
      displayValue={object.val}
      list={List}
      valueKey={"val"}
      onChange={setObject}
      fullHeight
      disabled
      disabledAlert={"ha-ha select is disabled"}
    />
  )
}

Mobile Pop Up (beta)

Props

Example

import React from 'react'

import { MobilePopUp } from 'pk-rtu-mirea-ui-library'

const App = () => {
  return (
    <MobilePopUp buttonText={'Open'} header={'Header'}>
      <p>Hi 1</p>
    </MobilePopUp>
  )
}

License

MIT © slavaklevleev