Commit 707823f0 authored by Odair M.'s avatar Odair M.

add #1: checkbox

add #1: green button

 #1 Implements textfield
parent 6df39324
......@@ -2,6 +2,7 @@ import React from 'react';
import './App.css';
import {Header} from './components/header/Header';
function App() {
return (
<div className="App">
......
import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
//import { makeStyles } from '@material-ui/core/styles';
/*
*
*
property propType required
--------------|-----------|----------
className | string | -
value | string | yes
filledIn | bool | -
label | string | yes
indeterminate | bool | -
onChange | func | -
id | string | -
disabled | bool | -
checked | bool | -
text | string | -
-------------------------------------
* Usage example:
<CheckBox value="Blue" label="Blue" text="oi" />
*/
export function CheckBox(props) {
return (
<div>
<Checkbox
indeterminate = {props.indeterminate}
className = {props.className}
filledIn = {props.filledIn}
onChange = {props.onChange}
disabled = {props.disabled}
checked = {props.checked}
label = {props.label}
value = {props.value}
id = {props.id}
color = "default"
/>
<span>{props.text}</span>
</div>
)
}
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles(theme => ({
button: {
backgroundColor: props =>
props.transparent
? 'white'
: '#5E8D37',
fontFamily: 'Open Sans,SemiBold',
color: props => props.transparent ? '#5E8D37' :'#FFFFFF' ,
width: props => props.transparent ? "130px" : "100px",
height: "30px",
textAlign: 'left'
}
}))
/*
* props:
* text: texto que vai dentro do botão
* transparent true se quer com o fundo transparente
* Exemplo de uso:
*
<GreenButton text='Log in' > </GreenButton>
<GreenButton transparent='true' text='Reservar sala' > </GreenButton>
*/
export function GreenButton(props) {
const classes = useStyles(props)
return (
<div>
<Button className={classes.button} >
{props.text}
</Button>
</div>
)
}
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
const useStyles = makeStyles(theme => ({
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200,
backgroundColor: "#fffff"
}
}));
/* Usage:
* <Field type="password" id="12" label="password field" />
* <Field id="12" label="text field" />
*/
export function Field(props) {
var type = props.type;
const classes = useStyles(props)
var variant = (props.type == "password")? "outlined" : "standard";
return (
<div>
<TextField
name={props.name}
autoComplete={props.autoComplete}
id={props.id}
value={props.value}
onChange={props.func}
variant={variant}
type={props.type}
label={props.label}>
</TextField>
</div>
);
}
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
const styles = {
label: {
fontFamily: 'Open Sans,SemiBold',
color: "red"
//color: "#A4A4A4"
}
}
export function Field(props) {
var type = props.type;
var variant = (props.type == "password")? "outlined" : "standard";
return (
<div>
<TextField className={styles} variant={variant} type={props.type} label={props.label} > </TextField>
</div>
);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment