1.0.2 • Published 4 years ago
@smashing/dialog v1.0.2
yarn add @smashing/dialog @smashing/button @smashing/portal
Basic example
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
>
Hello world
</Dialog>
Header and Footer without borders
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
isFooterSeparated={false}
isHeaderSeparated={false}
>
Hello world
</Dialog>
Without Header and Footer
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
hasHeader={false}
hasFooter={false}
>
Hello world
</Dialog>
Without Cancel button
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
hasCancel={false}
>
Hello world
</Dialog>
Customized Cancel and Confirm buttons
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
cancelAppearance="minimal"
cancelLabel="Abort"
confirmAppearance="flat"
confirmLabel="Ok"
intent="success"
>
Hello world
</Dialog>
Disabled Confirm button
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
isConfirmDisabled
>
Hello world
</Dialog>
Custom max width
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
width={700}
>
Hello world
</Dialog>
Handle onCancel and onConfirm
<Button onClick={() => setIsDialogVisible(true)}>Show dialog</Button>
<Dialog
isShown={isDialogVisible}
title="Example"
onCloseComplete={() => setIsDialogVisible()}
onCancel={close => {
console.log('cancel')
close()
}}
onConfirm={close => {
console.log('confirm')
close()
}}
>
Hello world
</Dialog>
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.2.5
4 years ago
0.2.3
4 years ago
0.2.4
4 years ago
0.2.2
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.27
5 years ago
0.1.27-alpha.13
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.15
5 years ago
0.1.14
5 years ago
0.1.13
5 years ago
0.1.12
5 years ago
0.1.11
5 years ago
0.1.10
5 years ago
0.1.9
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.3-alpha.67
5 years ago
0.1.3-alpha.66
5 years ago
0.1.3-alpha.65
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago