-
Notifications
You must be signed in to change notification settings - Fork 0
Label
Radi Cho edited this page Jan 6, 2018
·
3 revisions
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 laterRSG
is removed from the components so you have to use onlyLabel
instead ofRSGLabel
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.
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 |
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 |
- labelTypes:
<RSGLabel labelType={`de`} >default</RSGLabel> <RSGLabel>default</RSGLabel>
<RSGLabel labelType={`s`} >success</RSGLabel>
<RSGLabel labelType={`w`} >warning</RSGLabel>
<RSGLabel labelType={`d`} color={`white`}>danger</RSGLabel>
- The prop opacity:
<RSGLabel opacity={`0.5`} labelType={`s`} >success</RSGLabel>
- The prop color:
<RSGLabel labelType={`d`} color={`white`}>danger</RSGLabel>
If you want to use rsg-components
(and any other thing related to React, for that matter) at it's best, I recommend you read more React docs:
And understand it's architecture and history better.
- https://en.wikipedia.org/wiki/React_(JavaScript_library)
- https://github.com/acdlite/react-fiber-architecture (For understanding React Fiber's (aka React 16+) internals)
npm install rsg-components --save
or
yarn add rsg-components