77 lines
1.8 KiB
Plaintext
77 lines
1.8 KiB
Plaintext
---
|
|
name: Introduction
|
|
route: /
|
|
---
|
|
|
|
import { Playground, Props } from 'docz';
|
|
import { State } from 'react-powerplug';
|
|
import { TableList, TableListItem } from './../index.js';
|
|
|
|
# Introduction
|
|
|
|
**@ohif/ui is a collection of components and utilities** that power OHIF's
|
|
[zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
|
|
([demo][demo-url]). We maintain them as a separate component library to:
|
|
|
|
- Decouple presentation from business logic
|
|
- Test and develop components in isolation
|
|
- Provide well documented, reusable components
|
|
- Aid rapid application development for context specific viewers
|
|
|
|
## Quick Example
|
|
|
|
> This component library is pre- v1.0. All realeases until a v1.0 have the
|
|
> possibility of introducing breaking changes. Please depend on an "exact"
|
|
> version in your projects to prevent issues caused by loose versioning.
|
|
|
|
```js
|
|
// Add '@ohif/ui' as a dependency
|
|
yarn add @ohif/ui
|
|
|
|
// Import and use components
|
|
import { TableList } from '@ohif/ui'
|
|
```
|
|
|
|
<Playground>
|
|
<State
|
|
initial={{
|
|
selectedIndex: null,
|
|
listItems: [
|
|
{ label: 'Brain Left' },
|
|
{ label: 'Brain Right' },
|
|
{ label: 'Heart Left' },
|
|
{ label: 'Heart Right' },
|
|
],
|
|
}}
|
|
>
|
|
{({ state, setState }) => (
|
|
<TableList headerTitle="Example Table List Header">
|
|
{state.listItems.map((item, index) => {
|
|
return (
|
|
<TableListItem
|
|
key={`item_${index}`}
|
|
itemClass={state.selectedIndex === index ? 'selected' : ''}
|
|
itemIndex={index}
|
|
onItemClick={() => alert('item clicked')}
|
|
>
|
|
<label>{item.label}</label>
|
|
</TableListItem>
|
|
);
|
|
})}
|
|
</TableList>
|
|
)}
|
|
</State>
|
|
</Playground>
|
|
|
|
## FAQ
|
|
|
|
...
|
|
|
|
<!--
|
|
Links
|
|
-->
|
|
|
|
<!-- prettier-ignore-start -->
|
|
[demo-url]: https://docs.ohif.org/demo/
|
|
<!-- prettier-ignore-end -->
|