Dialog

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Dialogs appear in front of app content to provide critical information or ask for a decision. They remain on screen until confirmed, dismissed, or a required action has been taken.

<x-mbc::button 
    label="Open Dialog" 
    onclick="document.getElementById('my-dialog').MDCDialog.open()" 
/>

<x-mbc::dialog id="my-dialog">
    Dialog content here
    
    </x-mbc::dialog>

Basic link

A basic dialog can be created using the mbc::dialog component. You need to provide a button or trigger to open the dialog using JavaScript.

Use data-mdc-dialog-action="close" on buttons to close the dialog.

<x-mbc::button 
    label="Open Basic Dialog" 
    onclick="document.getElementById('demo-basic-dialog').MDCDialog.open()" 
/>


<x-mbc::dialog id="demo-basic-dialog">
    <x-mbc::typography>
        This is a basic dialog. Click outside or press ESC to close.
    </x-mbc::typography>
    
    </x-mbc::dialog>

With Title link

You can add a title to the dialog using the title attribute. The title will be displayed at the top of the dialog.

<x-mbc::button 
    label="Open Dialog with Title" 
    onclick="document.getElementById('demo-title-dialog').MDCDialog.open()" 
/>

<x-mbc::dialog id="demo-title-dialog" title="Dialog Title">
    <x-mbc::typography>
        This dialog has a title at the top. Titles help users understand 
        the purpose of the dialog at a glance.
    </x-mbc::typography>
    
    </x-mbc::dialog>

Scrollable Content link

For dialogs with long content, you can make the content area scrollable by adding the scrollable attribute.

<x-mbc::button 
    label="Open Scrollable Dialog" 
    onclick="document.getElementById('demo-scrollable-dialog').MDCDialog.open()" 
/>

<x-mbc::dialog id="demo-scrollable-dialog" title="Terms and Conditions" scrollable>
    <x-mbc::typography gutterBottom>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </x-mbc::typography>
    
    <x-mbc::typography gutterBottom>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat.
    </x-mbc::typography>
    
    <x-mbc::typography>
        More content here... The content area will be scrollable.
    </x-mbc::typography>
    
    </x-mbc::dialog>

Fullscreen Dialog link

Fullscreen dialogs take up the entire screen and are useful for complex or multi-step tasks. Use the fullscreen attribute to enable this mode.

<x-mbc::button 
    label="Open Fullscreen Dialog" 
    onclick="document.getElementById('demo-fullscreen-dialog').MDCDialog.open()" 
/>

<x-mbc::dialog id="demo-fullscreen-dialog" title="Fullscreen Dialog" fullscreen>
    <x-mbc::typography variant="h6" gutterBottom>
        Full Screen Experience
    </x-mbc::typography>
    
    <x-mbc::typography gutterBottom>
        This dialog takes up the entire screen, providing maximum space 
        for content and interactions.
    </x-mbc::typography>
    
    <x-mbc::typography>
        Fullscreen dialogs are ideal for complex forms, detailed settings, 
        or multi-step processes.
    </x-mbc::typography>
    
    </x-mbc::dialog>

Dialog Actions link

Dialogs typically contain action buttons in the footer. Use the actions slot to add buttons with appropriate actions.

Use data-mdc-dialog-action attributes to handle different user responses:

data-mdc-dialog-action="close" - Closes the dialog without action
data-mdc-dialog-action="accept" - Accepts/confirms the dialog action
Custom values for specific actions in your JavaScript handlers

<x-mbc::button 
    label="Open Confirmation Dialog" 
    onclick="document.getElementById('demo-actions-dialog').MDCDialog.open()" 
/>

<x-mbc::dialog id="demo-actions-dialog" title="Delete Confirmation">
    <x-mbc::typography>
        Are you sure you want to delete this item? 
        This action cannot be undone.
    </x-mbc::typography>
    
    </x-mbc::dialog>

Properties link

mbc::dialog link

Name	Type	Default	Description
`children`	`string \| html`		Required. The content of the dialog.
`fullscreen`	`bool`	`false`	If true, the dialog will be displayed in fullscreen mode.
`open`	`bool`	`false`	If true, the dialog will be open by default.
`scrollable`	`bool`	`false`	If true, the dialog content will be scrollable.
`title`	`string`		The title text displayed at the top of the dialog.

References link

Edit this page