User Tools

Site Tools


eolab:treemap:dashboard:panel

This page contains the summary of the Panel Dashboarding tool

Panel Objects are built on Param library. Panel objects are flexible in design and control and can be easily manipulated. Panel objects have some shared parameters to control the size and style of the rendered view.Similarly panel objects have parameters specific to each compontents to customize them.

Styling Components

css_classes

The css_classes parameter allows associating a Panel component with one or more CSS classes.CSS styles can be embedded in raw form or by referencing an external .css file. The css files can be added to panel using pn.extension() function. pn.extension() can have two types of parameters , for raw CSS it takes raw_css and for CSS files it take css_files as a parameter.

background

In case we want to give background color to a component we can simply set a parameter and assign a hex value to it.

loading

All components have a loading parameter which indicates that it is currently processing an event. The loading spinner is configurable.Before adding loading spinner to a component we have to add the spinner in pn.extension()

style

Certain components, specifically markup-related panes, expose a style parameter that allows defining CSS styles

visible

All components provide a visible parameter which allows toggling whether the component should be visible or not.

Component Size and Layout

Size and spacing of components are controlled by a set of parameters.

margin

Margin parameter is used to create space around a component.

align

The align parameter controls how components align vertically and horizontally.

Absolute sizing using width and height

There are two types of sizing in panel:Auto sizing and absolute sizing.

Responsive sizing

sizing_mode

  1. fixed
  2. stretch_width
  3. stretch_height
  4. stretch_both
  5. scale_height
  6. scale_width
  7. scale_both

Spacer

Helps to put fixed or responsive spacing between components.Support absolute and responsive sizing mode. VSpacer and HSpacer provide responsive vertical and horizontal spacing.

References:

eolab/treemap/dashboard/panel.txt · Last modified: 2022/08/24 18:03 by farooq001