1
2 <!-- Compiled and minified CSS -->
3 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
4
5 <!-- Compiled and minified JavaScript -->
6 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
7
1/* Answer to: "material design css" */
2
3/*
4 Here's a few frameworks that you may like:
5 https://materializecss.com/
6 https://material.io/develop/web/
7 https://getmdl.io/
8 https://www.w3schools.com/w3css/w3css_material.asp
9 https://www.muicss.com/
10 https://mdbootstrap.com/
11
12 Check the source for more information and frameworks.
13*/
1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <!--Import Google Icon Font-->
6 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7 <!--Import materialize.css-->
8 <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
9
10 <!--Let browser know website is optimized for mobile-->
11 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
12 </head>
13
14 <body>
15
16 <!--JavaScript at end of body for optimized loading-->
17 <script type="text/javascript" src="js/materialize.min.js"></script>
18 </body>
19 </html>
20
1
2 <div class="row">
3 <div class="col s12 m6">
4 <div class="card blue-grey darken-1">
5 <div class="card-content white-text">
6 <span class="card-title">Card Title</span>
7 <p>I am a very simple card. I am good at containing small bits of information.
8 I am convenient because I require little markup to use effectively.</p>
9 </div>
10 <div class="card-action">
11 <a href="#">This is a link</a>
12 <a href="#">This is a link</a>
13 </div>
14 </div>
15 </div>
16 </div>
17
1import TextField from '@material-ui/core/TextField'
2
3<TextField
4 id="slots"
5 type="number"
6 min={1}
7 defaultValue="1"
8 className="TextField pa2"
9 onChange={handleChange}
10 label="number of slots"
11 InputProps={{
12 inputProps: { min: 1}
13 }}
14 InputLabelProps = {{
15 shrink:true,
16 }}/>