Skip to content
Radi Cho edited this page Jan 6, 2018 · 3 revisions

RSGLabel

The raw code used to generate image:

import React                  from 'react';
import ReactDOM               from 'react-dom';
import { RSGLabel }           from 'rsg-components';

export class MainComponent extends React.Component {
  render(){
    return(
      <div>
        <h1>RSGLabel: default without props | h1 <RSGLabel>default</RSGLabel></h1>
        <p>RSGLabel: default without props | p <RSGLabel>default</RSGLabel></p>
        <div>RSGLabel: default without props | div <RSGLabel>default</RSGLabel></div>
        <h1>RSGLabel: default | prop labelType: "de" | prop color: "white" | h1 | <RSGLabel labelType={`de`} color={`white`} >default</RSGLabel></h1>
        <h2>RSGLabel: success | prop labelType: "s" | h2 <RSGLabel labelType={`s`} >success</RSGLabel></h2>
        <h3>RSGLabel: warning | prop labelType: "w" | h3 <RSGLabel labelType={`w`} >warning</RSGLabel></h3>
        <h3>RSGLabel: danger | prop labelType: "d" | h3 <RSGLabel labelType={`d`} >danger</RSGLabel></h3>
      </div>
    )
  }
}

var app = document.getElementById('app');
ReactDOM.render(<MainComponent />, app);

In version 3.0.0-beta.1 and later RSG is removed from the components so you have to use only Label instead of RSGLabel

Props:

Props Input type Example
standard props - Props React will accept like style, onClick, etc.
color string color={"red"}
opacity string opacity={"0.5"}
labelType string labelType={"de"}

You can use a style prop to add other styles.

labelTypes

labelType value background type
without labelType or de rgb(195, 195, 195) default
s rgb(85, 180, 90) success
w rgb(255, 150, 25) warning
d rgb(220, 75, 75) danger

RSGLabel's styles:

style name value note
color rgb(10, 10, 10) -
font-family monospace -
font-size .975em https://goo.gl/DqO6Rd
padding 175em .3em https://goo.gl/DqO6Rd
border-radius .235em https://goo.gl/DqO6Rd

Examples:

  • labelTypes:

https://github.com/Devs123/rsg-components/blob/master/images/RSGLabel_default.png

<RSGLabel labelType={`de`} >default</RSGLabel> <RSGLabel>default</RSGLabel>

https://github.com/Devs123/rsg-components/blob/master/images/RSGLabel_success.png

<RSGLabel labelType={`s`} >success</RSGLabel>

https://github.com/Devs123/rsg-components/blob/master/images/RSGLabel_warning.png

<RSGLabel labelType={`w`} >warning</RSGLabel>

https://github.com/Devs123/rsg-components/blob/master/images/RSGLabel_danger.png

<RSGLabel labelType={`d`} color={`white`}>danger</RSGLabel>

  • The prop opacity:

https://github.com/Devs123/rsg-components/blob/master/images/RSGLabel_opacity.png

<RSGLabel opacity={`0.5`} labelType={`s`} >success</RSGLabel>

  • The prop color:

https://github.com/Devs123/rsg-components/blob/master/images/RSGLabel_danger.png

<RSGLabel labelType={`d`} color={`white`}>danger</RSGLabel>

npm install rsg-components --save
or
yarn add rsg-components

Clone this wiki locally