Container#

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

import panel as pn
import panel_material_ui as pmui
from panel_material_ui import Container

pn.extension()

The Container component centers content horizontally with responsive padding.




Parameters:#




Core#


    

  • disable_gutters (boolean): If True, removes the default padding on the left and right.
    • 

  • fixed (boolean): Sets max-width to match min-width of current breakpoint for fixed-width layouts.
    • 

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





A Container has two modes, fluid (the default), where the width is bounded by the width_option, which corresponds to a breakpoint:


sx = {'boxShadow':'var(--mui-shadows-3)'}

Container(
    pmui.Typography('Container', height=100, variant='h4'),
    pmui.Typography('This container centers it contents', height=100),
    sx=sx, width_option='sm'
)







            
            
If you want to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the fixed parameter. The max-width matches the min-width of the current breakpoint.


Container('Container', sx=sx, width_option='sm', fixed=True)







            
            


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









                

              
              
              
              
              
                
              
            

            
            
              
                
                



  



     On this page