Modals

AsideModal

Storybook

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 title="Component Aside Modal" open={true} onClose={() => function('function to close the aside modal')} />
4    

TitleVariant

With the prop titleVariant you can customize the size of the title

1import AsideModal from 'dd360-ds/AsideModal'
2
3<AsideModal variant='h4' title="Component Aside Modal" open={true} onClose={() => function('function to close the aside modal')} />
4    

Position

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 position='right' title="Component Aside Modal" open={true} onClose={() => function('function to close the aside modal')} />
4
5    

Position Left

1import AsideModal from 'dd360-ds/AsideModal'
2
3<AsideModal position='left' title="Component Aside Modal" open={true} onClose={() => function('function to close the aside modal')} />
4    

DisableEscapeKeyDown

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 disableEscapeKeyDown title="Component Aside Modal" open={true} onClose={() => function('function to close the aside modal')} />
4    

API Reference