react-jam-ui
Version:
React JAM UI components
239 lines (232 loc) • 6.27 kB
Markdown
# React JAM UI
Install
`npm i react-jam-ui --save`
For set custom theme need create ui.config.json file in root of project
Use Component
`import 'Component' from 'react-jam-ui/components/{Component}`
Components used React and stylus and you need build it with webpack loaders.
Docs: https://drzoom.gitlab.io/react-jam-ui/
docker build -t react-jam-ui .
docker run -d -ti -p 8080:8080 -v {path}:/app --name react-jam-ui react-jam-ui
Example full config
```json
{
"$breakpoints": {
"xs": {
"breakpoint": "480px",
"width": "460px"
},
"sm": {
"breakpoint": "768px",
"width": "750px"
},
"md": {
"breakpoint": "992px",
"width": "970px"
},
"xl": {
"breakpoint": "1200px",
"width": "1170px"
},
"xxl": {
"breakpoint": "1430px",
"width": "1250px"
}
},
"$layout": {
"color": "#000000",
"bg": "#FFFFFF",
"font-family": "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'sans-serif'",
"font-size": "1rem",
"link": {
"default": "#0f90fd",
"hover": "#0f6dbc"
},
"p-gap": "20px"
},
"$sizes": {// Sizes (Buttons, inputs)
"default": {// size without size class, required!
"height": "32px",
"font-size": "14px"
},
"xs": {
"height": "20px",
"font-size": "12px"
},
"sm": {
"height": "26px",
"font-size": "14px"
},
"lg": {
"height": "38px",
"font-size": "16px"
},
"xl": {
"height": "68px",
"font-size": "18px"
}
},
"$grid": {
"default": {
"cols": 12,
"gap": "15px"
}
},
"$buttons": {
"default": {
"theme": "flat",
"default": {
"bg": "#2085e4",
"color": "#FFFFFF",
"border": "1px solid #105799",
"radius": "8px",
"textShadow": "0px 1px 0px rgba(0, 0, 0, 0.4)"
},
"hover": {
"bg": "#186be7",
"color": "#FFFFFF",
"border": "1px solid #105799"
},
"active": {
"bg": "#004ab8",
"color": "#FFFFFF",
"border": "1px solid #105799"
},
"disabled": {
"bg": "#b8b8b8",
"color": "#FFFFFF",
"border": "1px solid #b8b8b8"
}
},
"other": {
"theme": "flat",
"default": {
"bg": "none",
"color": "#FFFFFF",
"border": "2px solid #ff9000",
"radius": "8px",
"textShadow": "0px 1px 0px rgba(0, 0, 0, 0.4)"
},
"hover": {
"bg": "#ff9000",
"color": "#FFFFFF",
"border": "2px solid #ff9000"
},
"active": {
"bg": "#e17f00",
"color": "#FFFFFF",
"border": "2px solid #e17f00"
},
"disabled": {
"bg": "#b8b8b8",
"color": "#FFFFFF",
"border": "1px solid #b8b8b8"
}
}
},
"$inputs": {
"default": {
"theme": "default",
"default": {
"bg": "#FFFFFF",
"color": "#404040",
"border": "#d0d0d0",
"radius": "4px"
},
"focus": {
"bg": "#FFFFFF",
"color": "#404040",
"border": "#d0d0d0",
"radius": "4px"
},
"valid": {
"bg": "lighten(#ebebeb, 20%)",
"color": "#FF4040",
"border": "red",
"radius": "4px"
},
"error": {
"bg": "darken(#ebebeb, 20%)",
"color": "#4040FF",
"border": "red",
"radius": "4px"
}
},
"material": {
"theme": "material",
"default": {
"bg": "none",
"color": "#5d5d5e",
"border": "#c9c9c9",
"radius": 0
},
"focus": {
"bg": "none",
"color": "#5d5d5e",
"border": "#2085e4",
"radius": 0
},
"valid": {
"bg": "none",
"color": "#5d5d5e",
"border": "#87e057",
"radius": 0
},
"error": {
"bg": "none",
"color": "#ff0000",
"border": "#ff0000",
"radius": 0
}
}
},
"$checkboxes": {
"default": {
"theme": "simple",
"default": {
"bg": "#FFFFFF",
"color": "#83909D",
"border": "#9BA3A9",
"radius": "4px"
},
"checked": {
"bg": "#FFFFFF",
"color": "#06213B",
"border": "1px solid #21BAFA",
"radius": "4px"
}
}
},
"$radios": {
"default": {
"theme": "simple",
"default": {
"bg": "#FFFFFF",
"color": "#83909D",
"border-color": "#21BAFA"
},
"checked": {
"bg": "#FFFFFF",
"color": "#06213B",
"border-color": "#21BAFA"
}
}
},
"$forms": {
"gap": "20px",
"hLabel": "200px",
"labelGap": "5px"
},
"$tooltips": {
"default": {
"theme": "default"
}
},
"$loaders": {
"default": {
"theme": "cube-grid",
"color": "#2085e4"
}
}
}
```