CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-panel

The powerful data exploration & web app framework for Python.

Pending
Overview
Eval results
Files

layout-components.mddocs/

Layout Components

Container components for organizing and structuring Panel applications. Layout components provide flexible ways to arrange other Panel components, from basic row/column layouts to advanced grid systems, tabbed interfaces, and modal dialogs.

Capabilities

Basic Layouts

Fundamental container components for organizing content vertically or horizontally.

class Column:
    """
    Vertical layout container that arranges components in a column.
    
    Parameters:
    - *objects: Components to include in the column
    - width: Width of the column
    - height: Height of the column
    - sizing_mode: How component should size itself
    - margin: Margin around the component
    - **params: Additional parameters
    """

class Row:
    """
    Horizontal layout container that arranges components in a row.
    
    Parameters:
    - *objects: Components to include in the row
    - width: Width of the row
    - height: Height of the row
    - sizing_mode: How component should size itself
    - margin: Margin around the component
    - **params: Additional parameters
    """

Spacer Components

Components for creating fixed or flexible spacing between other components.

class Spacer:
    """
    Fixed spacer component for creating space between components.
    
    Parameters:
    - width: Width of the spacer
    - height: Height of the spacer
    - sizing_mode: How spacer should size itself
    """

class HSpacer:
    """Horizontal spacer that expands to fill available horizontal space"""

class VSpacer:
    """Vertical spacer that expands to fill available vertical space"""

class Divider:
    """Visual divider line component for separating content sections"""

Tabbed Interfaces

Organize content in tabbed interfaces for space-efficient layouts.

class Tabs:
    """
    Tabbed interface layout for organizing content in tabs.
    
    Parameters:
    - *objects: Tuple pairs of (title, component) for each tab
    - tabs_location: Location of tabs ('above', 'below', 'left', 'right')
    - closable: Whether tabs can be closed
    - **params: Additional parameters
    """

Card Layouts

Card-style containers with headers and bodies for structured content presentation.

class Card:
    """
    Card-style container with header and body sections.
    
    Parameters:
    - *objects: Components to include in card body
    - header: Component or text for card header
    - title: Title text for the card
    - header_background: Background color for header
    - header_color: Text color for header
    - collapsible: Whether card can be collapsed
    - collapsed: Initial collapsed state
    - **params: Additional parameters
    """

Accordion Layouts

Collapsible accordion-style layouts for organizing content sections.

class Accordion:
    """
    Collapsible accordion layout with multiple sections.
    
    Parameters:
    - *objects: Tuple pairs of (title, component) for each section
    - active: List of initially active sections
    - multiple: Whether multiple sections can be open
    - toggle: Whether sections can be toggled closed
    - **params: Additional parameters
    """

Grid Layouts

Advanced grid-based layouts for precise component positioning.

class GridSpec:
    """
    Matplotlib-style grid specification for precise layout control.
    
    Parameters:
    - ncols: Number of columns in grid
    - nrows: Number of rows in grid
    - **params: Additional parameters
    """

class GridBox:
    """
    CSS Grid-based layout container.
    
    Parameters:
    - *objects: Components to include in grid
    - ncols: Number of columns
    - nrows: Number of rows
    - **params: Additional parameters
    """

class GridStack:
    """
    Interactive grid stack layout with drag-and-drop support.
    
    Parameters:
    - *objects: Components to include in grid stack
    - mode: Interaction mode ('warn', 'append', 'error')
    - allow_resize: Whether items can be resized
    - allow_drag: Whether items can be dragged
    - **params: Additional parameters
    """

Flexible Layouts

CSS Flexbox-based layouts for responsive design.

class FlexBox:
    """
    CSS Flexbox layout container for responsive layouts.
    
    Parameters:
    - *objects: Components to include in flexbox
    - flex_direction: Direction of flex ('row', 'column', 'row-reverse', 'column-reverse')
    - flex_wrap: How items wrap ('nowrap', 'wrap', 'wrap-reverse')
    - justify_content: Main axis alignment
    - align_items: Cross axis alignment
    - align_content: Wrapped lines alignment
    - **params: Additional parameters
    """

Specialized Layouts

Advanced layout components for specific use cases.

class Feed:
    """
    Social media feed-style layout for streaming content.
    
    Parameters:
    - *objects: Components to include in feed
    - load_buffer: Number of objects to load ahead
    - scroll_button_threshold: Threshold for showing scroll button
    - auto_scroll_limit: Limit for auto-scrolling
    - **params: Additional parameters
    """

class FloatPanel:
    """
    Floating overlay panel that can be positioned anywhere.
    
    Parameters:
    - *objects: Components to include in panel
    - position: Position of panel ('top-left', 'top-right', etc.)
    - offsetx: Horizontal offset from position
    - offsety: Vertical offset from position
    - contained: Whether panel is contained within parent
    - **params: Additional parameters
    """

class Modal:
    """
    Modal dialog box for overlaying content.
    
    Parameters:
    - *objects: Components to include in modal
    - width: Width of modal
    - height: Height of modal
    - **params: Additional parameters
    """

class Swipe:
    """
    Swipeable layout for mobile interfaces.
    
    Parameters:
    - *objects: Components to swipe between
    - **params: Additional parameters
    """

Legacy Components

Deprecated layout components maintained for backwards compatibility.

class WidgetBox:
    """
    Legacy widget container (deprecated, use Column instead).
    
    Parameters:
    - *objects: Components to include
    - **params: Additional parameters
    """

Usage Examples

Basic Layout Example

import panel as pn

# Create components
title = pn.pane.Markdown("# My Dashboard")
sidebar = pn.Column(
    pn.widgets.Select(options=['A', 'B', 'C']),
    pn.widgets.IntSlider(),
    width=300
)
main_content = pn.pane.HTML("<p>Main content area</p>")

# Arrange in layout
layout = pn.Row(
    sidebar,
    pn.Column(title, main_content, sizing_mode='stretch_width'),
    sizing_mode='stretch_width'
)

Tabbed Interface Example

# Create tabbed interface
tabs = pn.Tabs(
    ("Data", pn.pane.DataFrame(df)),
    ("Visualization", plot_pane),
    ("Settings", settings_panel),
    tabs_location='above'
)

Grid Layout Example

# Create grid layout
gspec = pn.GridSpec(sizing_mode='stretch_both', height=600)
gspec[0, :2] = pn.pane.Markdown("# Header")
gspec[1:3, 0] = sidebar
gspec[1:3, 1] = main_plot
gspec[3, :2] = pn.pane.Markdown("Footer")

Install with Tessl CLI

npx tessl i tessl/pypi-panel

docs

authentication-system.md

chat-interface.md

core-functions.md

custom-components.md

index.md

layout-components.md

links-system.md

pane-system.md

parameter-integration.md

pipeline-system.md

template-system.md

widget-system.md

tile.json