Apply a Design#
This guide addresses how to select a design system to apply to the components to achieve a consistent design language.
Added in version 1.0.0: The design feature was added in 1.0.0 and is actively being developed and improved.
Applying different design systems in Panel can be achieved globally or per component. To select a design globally set it via the extension:
import panel as pn
pn.extension(design='material')
Alternatively you can also explicitly import and set a design on the config:
from panel.theme import Material
pn.config.design = Material
Any component that is rendered will now inherit this design. However, alternatively we can also set a design explicitly on a particular component, e.g.:
from panel.theme import Bootstrap, Material, Native
def create_components(design):
return pn.Column(
pn.widgets.FloatSlider(name='Slider', design=design),
pn.widgets.TextInput(name='TextInput', design=design),
pn.widgets.Select(
name='Select', options=['Biology', 'Chemistry', 'Physics'], design=design
),
pn.widgets.Button(
name='Click me!', icon='hand-click', button_type='primary', design=design
)
)
pn.Tabs(
('Bootstrap', create_components(Bootstrap)),
('Material', create_components(Material)),
('Native', create_components(Native)),
)
