61 lines
1.5 KiB
Markdown
61 lines
1.5 KiB
Markdown
# Components
|
|
|
|
This layer include [React components](https://facebook.github.io/react/docs/react-component.html) that let you split the UI into independent, reusable pieces, and think about each piece in isolation.
|
|
|
|
## Add a new component
|
|
|
|
To add a new page in Home (with side-bar and top-bar) :
|
|
|
|
- In components/Home
|
|
- Inside the [Switch] tag
|
|
|
|
```jsx
|
|
<SidebarMain>
|
|
<Switch>
|
|
{/* Add your <Route/> here! */}
|
|
</Switch>
|
|
</SidebarMain>
|
|
```
|
|
|
|
- Add your component route between [Switch] tag to load in home page
|
|
|
|
```javascript
|
|
<Route path="/route-name" component={ComponentName} />
|
|
```
|
|
|
|
To add a new item for menu bar
|
|
|
|
- In components/Home
|
|
- Inside the [Menu] tag
|
|
|
|
```javascript
|
|
<SidebarContent>
|
|
<Menu style={{ color: "rgb(117, 117, 117)", width: '210px' }}>
|
|
{/* Add you <NavLink /> here */}
|
|
</Menu>
|
|
</SidebarContent>
|
|
```
|
|
|
|
- Add your component NavLink between [Menu] tag
|
|
|
|
```javascript
|
|
<NavLink to='/route-name'>
|
|
<MenuItem primaryText="MenuItemName" style={{ color: "rgb(117, 117, 117)" }} leftIcon={<SvgIcon />} />
|
|
{/* Other menu itemes */}
|
|
</NavLink>
|
|
```
|
|
|
|
*Note: You can choose your icon for [SvgIcon] from [material-ui icons](http://www.material-ui.com/#/components/svg-icon)*
|
|
|
|
To add your page in Master page (without side-bar menu and top-bar)
|
|
|
|
- In components/Master/Master.tsx
|
|
- Add your [Route] tag between [Switch] tag
|
|
|
|
```javascript
|
|
<Switch>
|
|
<Route path='/route-name' component={ComponentName} />
|
|
{/* Other routes */}
|
|
</Switch>
|
|
```
|