Dialog#

Download this notebook from GitHub (right-click to download).

import panel as pn
from panel_material_ui import Button, Column, Dialog

pn.extension()

The Dialog component creates modal dialogs for important content or actions.




Parameters:#




Core#


    

  • full_screen (boolean): Whether the dialog takes up the full screen.
    • 

  • open (boolean): Whether the dialog is visible.
    • 

  • title (str): Header text for the dialog.
    • 







Display#


    

  • scroll (Literal["body", "paper"]): Whether the dialog should scroll the content or the paper.
    • 

  • width_option (Literal["xs", "sm", "md", "lg", "xl", False]): Maximum width breakpoint for the container.
    • 





The Dialog can be programmatically opened and closed by setting the open parameter:


open = Button(label='Open')
close = Button(label='Close')

dialog = Dialog('# This is a dialog', close)

open.js_on_click(args={'dialog': dialog}, code="dialog.data.open = true")
close.js_on_click(args={'dialog': dialog}, code="dialog.data.open = false")

Column(open, dialog).preview()







            
            
It can also be rendered in full screen:


open = Button(label='Open')
close = Button(label='Close')

dialog = Dialog(close, full_screen=True)

open.js_on_click(args={'dialog': dialog}, code="dialog.data.open = true")
close.js_on_click(args={'dialog': dialog}, code="dialog.data.open = false")

Column(open, dialog).preview()







            
            
Lastly, we can control the maximum size of the Dialog with the width_option and if we want also force it to always take on that size by setting the sizing_mode:


open = Button(label='Open')
close = Button(label='Close')

dialog = Dialog(close, sizing_mode='stretch_width', width_option='lg')

open.js_on_click(args={'dialog': dialog}, code="dialog.data.open = true")
close.js_on_click(args={'dialog': dialog}, code="dialog.data.open = false")

Column(open, dialog).preview()







            
            


Download this notebook from GitHub (right-click to download).









                

              
              
              
              
              
                
              
            

            
            
              
                
                



  



     On this page