Create basic app layout
This commit is contained in:
parent
888eff91d8
commit
6a27604e75
3
dist/index.html
vendored
3
dist/index.html
vendored
|
@ -1,9 +1,12 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>LED Toggle Demo</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
<script src="./bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
32
src/app.js
32
src/app.js
|
@ -3,8 +3,36 @@ import React from 'react';
|
|||
export default class Site extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
Hello React!
|
||||
<div className="ui text container">
|
||||
<div className="ui stackable two column grid">
|
||||
<div className="one column row">
|
||||
<div className="center aligned column">
|
||||
<div className="ui basic segment">
|
||||
<img className="ui left floated small image" src="http://criticalcontrol.com/wp-content/themes/cces/images/logo.png" />
|
||||
<span className="ui medium header">LED Toggle Demo</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column">
|
||||
<div className="ui segment">
|
||||
<div className="ui top attached label">Digital Out</div>
|
||||
<div className="ui two column grid">
|
||||
<div className="twelve wide column">
|
||||
<div className="ui right pointing label">
|
||||
DO1
|
||||
</div>
|
||||
<div className="ui buttons">
|
||||
<button className="ui red button">On</button>
|
||||
<button className="ui button">Off</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="four wide right aligned column">
|
||||
<i className="red idea big icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user