Modals
AsideModal
Storybook
AsideModal
The AsideModal component in React provides a convenient way to display important content or actions in a dialog that appears next to your main application content. By using a slide-out or slide-in effect, the AsideModal can draw the user's attention to critical information or provide additional context for an action without disrupting their workflow. With the ability to fully customize the content and appearance of your AsideModal, you can create a seamless and intuitive user experience that enhances the usability and effectiveness of your web application.
Imports
The first alternative is recommended since they can reduce the application bundle.
1import AsideModal from 'dd360-ds/AsideModal'1import { AsideModal } from 'dd360-ds'Usage
Use the AsideModal component as shown below:
The code snippet below shows how to use the AsideModal component:
1import AsideModal from 'dd360-ds/AsideModal'
2
3<AsideModal
4 title="Component Aside Modal"
5 open
6 onClose={() => function('function to close the aside modal')}
7/>
8TitleVariant
With the prop titleVariant you can customize the size of the title
1import AsideModal from 'dd360-ds/AsideModal'
2
3<AsideModal
4 variant='h4'
5 title="Component Aside Modal"
6 open
7 onClose={() => function('function to close the aside modal')}
8/>
9Position
With the prop position you can choose on which side of the screen to open the modal
Position Right
1import AsideModal from 'dd360-ds/AsideModal'
2
3<AsideModal
4 position='right'
5 title="Component Aside Modal"
6 open
7 onClose={() => function('function to close the aside modal')}
8/>
9Position Left
1import AsideModal from 'dd360-ds/AsideModal'
2
3<AsideModal
4 position='left'
5 title="Component Aside Modal"
6 open
7 onClose={() => function('function to close the aside modal')}
8/>
9DisableEscapeKeyDown
With the prop disableEscapeKeyDown you can disable the closing of the modal with the esc key
1import AsideModal from 'dd360-ds/AsideModal'
2
3<AsideModal
4 disableEscapeKeyDown
5 title="Component Aside Modal"
6 open
7 onClose={() => function('function to close the aside modal')}
8/>
9isStickyTitle
With the prop IsStickyTitle you can make the title sticky
1import AsideModal from 'dd360-ds/AsideModal'
2
3<AsideModal
4 title="Component Aside Modal"
5 open
6 isStickyTitle
7 onClose={() => function('function to close the aside modal')}
8/>
9API Reference
| Name | Types | Default |
|---|---|---|
| "titleVariant" | a label h1 h2 h3 h4 h5 h6 p small span currency anchorSmall | h4 |
| "position" | right left | right |
| "open" | boolean | false |
| "disableEscapeKeyDown" | boolean | false |
| "title" | string | - |
| "onClose" | function | - |
| "isStickyTitle" | boolean | false |
| "children" | ReactNode | - |
Note
This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.