2018-12-20 07:03:23 -08:00
|
|
|
---
|
|
|
|
name: Modal
|
|
|
|
---
|
|
|
|
|
|
|
|
import { Playground, PropsTable } from 'docz'
|
|
|
|
|
|
|
|
import { ModalComponent } from './modal.js'
|
|
|
|
|
|
|
|
# Modal
|
|
|
|
|
|
|
|
## Properties
|
|
|
|
|
|
|
|
<PropsTable of={ModalComponent} />
|
|
|
|
|
2019-02-04 20:41:45 -08:00
|
|
|
## Basic Usage
|
2018-12-20 07:03:23 -08:00
|
|
|
|
|
|
|
<Playground>
|
|
|
|
<ModalComponent
|
|
|
|
renderTrigger={toggleVisibility => (
|
2019-02-04 20:41:45 -08:00
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
onClick={toggleVisibility}
|
|
|
|
>
|
2018-12-20 07:03:23 -08:00
|
|
|
Open Modal
|
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{toggleVisibility => (
|
|
|
|
<div style={{ padding: '50px', backgroundColor: 'white' }}>
|
|
|
|
Modal Content
|
2019-02-04 20:41:45 -08:00
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
onClick={toggleVisibility}
|
|
|
|
>
|
2018-12-20 07:03:23 -08:00
|
|
|
Close Modal
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</ModalComponent>
|
|
|
|
</Playground>
|
|
|
|
|
|
|
|
## Don't close with ESC or backdrop click
|
|
|
|
|
|
|
|
<Playground>
|
|
|
|
<ModalComponent
|
|
|
|
closeOnEsc={false}
|
|
|
|
closeOnBackdropClick={false}
|
|
|
|
renderTrigger={toggleVisibility => (
|
2019-02-04 20:41:45 -08:00
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
onClick={toggleVisibility}
|
|
|
|
>
|
2018-12-20 07:03:23 -08:00
|
|
|
Open Modal
|
|
|
|
</button>
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{toggleVisibility => (
|
|
|
|
<div style={{ padding: '50px', backgroundColor: 'white' }}>
|
|
|
|
Modal Content
|
2019-02-04 20:41:45 -08:00
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
onClick={toggleVisibility}
|
|
|
|
>
|
2018-12-20 07:03:23 -08:00
|
|
|
Close Modal
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</ModalComponent>
|
|
|
|
</Playground>
|