Container#

Material version available

pn.ui.Container resolves to the Material Design implementation of this component, documented in the panel-material-ui reference. This page documents the classic pn.layout.Container.

import panel as pn
import panel.ui

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.
    • 







Styling#


    

  • sx (dict): Component level styling API.
    • 

  • theme_config (dict): Theming API.
    • 











Basic Uage#


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-12)', 'backgroundColor': '#afafaf'}

title = pn.ui.Typography('Container', height=100, variant='h4')
content = pn.ui.Typography('This container centers it contents', height=100)

pn.ui.Container(title, content, sx=sx, width_option='sm')







            
            




Fixed#


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 Container will adapt it’s max-width to the min-width of the current breakpoint:


pn.ui.Container(title, sx=sx, width_option=False, fixed=True)







            
            




Gutters#


By default the Container will have gutters around the contents, you can disable this with disable_gutters=True:


pn.ui.Container(title, sx=sx, width_option='xs', disable_gutters=True)







            
            




API Reference#




Parameters#


container = pn.ui.Container(title, sx=sx, width_option='sm')

pn.ui.Row(container.controls(jslink=True), container)







            
            






References#


Material UI Container: