70 lines
1.2 KiB
Plaintext
70 lines
1.2 KiB
Plaintext
---
|
|
name: Modal
|
|
---
|
|
|
|
import { Playground, PropsTable } from 'docz'
|
|
|
|
import { ModalComponent } from './modal.js'
|
|
|
|
# Modal
|
|
|
|
## Properties
|
|
|
|
<PropsTable of={ModalComponent} />
|
|
|
|
## Basic Usage
|
|
|
|
<Playground>
|
|
<ModalComponent
|
|
renderTrigger={toggleVisibility => (
|
|
<button
|
|
type="button"
|
|
onClick={toggleVisibility}
|
|
>
|
|
Open Modal
|
|
</button>
|
|
)}
|
|
>
|
|
{toggleVisibility => (
|
|
<div style={{ padding: '50px', backgroundColor: 'white' }}>
|
|
Modal Content
|
|
<button
|
|
type="button"
|
|
onClick={toggleVisibility}
|
|
>
|
|
Close Modal
|
|
</button>
|
|
</div>
|
|
)}
|
|
</ModalComponent>
|
|
</Playground>
|
|
|
|
## Don't close with ESC or backdrop click
|
|
|
|
<Playground>
|
|
<ModalComponent
|
|
closeOnEsc={false}
|
|
closeOnBackdropClick={false}
|
|
renderTrigger={toggleVisibility => (
|
|
<button
|
|
type="button"
|
|
onClick={toggleVisibility}
|
|
>
|
|
Open Modal
|
|
</button>
|
|
)}
|
|
>
|
|
{toggleVisibility => (
|
|
<div style={{ padding: '50px', backgroundColor: 'white' }}>
|
|
Modal Content
|
|
<button
|
|
type="button"
|
|
onClick={toggleVisibility}
|
|
>
|
|
Close Modal
|
|
</button>
|
|
</div>
|
|
)}
|
|
</ModalComponent>
|
|
</Playground>
|