开发者社区> 镜像站> NPM> @admui/workspace
@admui/workspace
```jsx 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'
Last updated a year ago by tmonstrs .
MIT · Original npm · Tarball · package.json
$ cnpm install @admui/workspace 
SYNC missed versions from official npm registry.
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>

Current Tags

  • 0.3.1                                ...           latest (a year ago)

22 Versions

  • 0.3.1                                ...           a year ago
  • 0.3.0                                ...           a year ago
  • 0.1.31                                ...           2 years ago
  • 0.1.30                                ...           2 years ago
  • 0.1.29                                ...           2 years ago
  • 0.1.28                                ...           2 years ago
  • 0.1.27                                ...           2 years ago
  • 0.1.26                                ...           2 years ago
  • 0.1.25                                ...           2 years ago
  • 0.1.24                                ...           2 years ago
  • 0.1.23                                ...           2 years ago
  • 0.1.22                                ...           2 years ago
  • 0.1.21                                ...           2 years ago
  • 0.1.20                                ...           2 years ago
  • 0.1.19                                ...           2 years ago
  • 0.1.18                                ...           2 years ago
  • 0.1.17                                ...           2 years ago
  • 0.1.14                                ...           2 years ago
  • 0.1.13                                ...           2 years ago
  • 0.1.11                                ...           2 years ago
  • 0.1.10                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 66
Dependencies (2)
Dev Dependencies (8)
Dependents (0)
None