0.3.1 • Published 5 years ago
@admui/workspace v0.3.1
import { MemoryRouter, Link } from 'react-router-dom'
import { Workspace, Screen, WorkspaceProvider, withWorkspace } from '@admui/workspace'
import { ThemeProvider } from '@admui/theme'
import { Panel } from '@admui/panel'
const ToggleState = withWorkspace(({ expanded, toggle }) => (
<a onClick={toggle} style={{ color: '#ffffff', marginRight: 8 }}>
{expanded ? 'Collapse' : 'Expand'}
</a>
))
;<ThemeProvider>
<WorkspaceProvider>
<MemoryRouter>
<div style={{ width: '100%', overflow: 'hidden' }}>
<div style={{ padding: 20 }}>
<Link to='/' style={{ color: '#ffffff', marginRight: 8 }}>
Main
</Link>
<Link to='/screens' style={{ color: '#ffffff', marginRight: 8 }}>
Screens
</Link>
<ToggleState />
</div>
<div style={{ width: '100%', height: 300 }}>
<Workspace>
<Screen exact path='/'>
<Panel>
<span style={{ color: '#ffffff' }}>
Main
</span>
</Panel>
</Screen>
<Screen exact path='/screens'>
<Panel>
<Link to='/screens/1' style={{ color: '#ffffff', marginRight: 8 }}>
Screen1
</Link>
<Link to='/screens/2' style={{ color: '#ffffff', marginRight: 8 }}>
Screen2
</Link>
</Panel>
</Screen>
<Screen path='/screens/1'>
<Panel>
<span style={{ color: '#ffffff' }}>
Screen1
</span>
</Panel>
</Screen>
<Screen path='/screens/2'>
<Panel>
<span style={{ color: '#ffffff' }}>
Screen2
</span>
</Panel>
</Screen>
</Workspace>
</div>
</div>
</MemoryRouter>
</WorkspaceProvider>
</ThemeProvider>
0.3.1
5 years ago
0.3.0
5 years ago
0.1.31
5 years ago
0.1.30
5 years ago
0.1.29
5 years ago
0.1.28
5 years ago
0.1.27
5 years ago
0.1.26
5 years ago
0.1.25
5 years ago
0.1.24
5 years ago
0.1.23
5 years ago
0.1.22
5 years ago
0.1.21
5 years ago
0.1.20
5 years ago
0.1.19
5 years ago
0.1.18
5 years ago
0.1.17
5 years ago
0.1.14
5 years ago
0.1.13
5 years ago
0.1.11
5 years ago
0.1.10
5 years ago
0.1.0
5 years ago