CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-streamlit

A faster way to build and share data apps

Overview
Eval results
Files

layout-containers.mddocs/

Layout and Containers

Functions for organizing app layout including columns, containers, sidebars, tabs, and expandable sections. These components provide the structural foundation for organizing content and creating sophisticated user interfaces.

Capabilities

Layout Functions

Core layout functions for organizing content in columns, rows, and structured arrangements.

def columns(spec, *, gap="small"):
    """
    Create column layout for horizontal content arrangement.

    Args:
        spec (int or list): Number of columns or list of column widths
        gap (str): Gap size between columns ("small", "medium", "large")

    Returns:
        list[DeltaGenerator]: List of column containers
    """

def tabs(tab_list):
    """
    Create tab container with multiple named tabs.

    Args:
        tab_list (list): List of tab names/labels

    Returns:
        list[DeltaGenerator]: List of tab containers
    """

Example usage:

# Create equal-width columns
col1, col2, col3 = st.columns(3)
with col1:
    st.write("Column 1")
with col2:
    st.write("Column 2")

# Create tabs
tab1, tab2 = st.tabs(["Data", "Chart"])
with tab1:
    st.dataframe(data)
with tab2:
    st.line_chart(data)

Container Functions

Generic container functions for grouping content with optional styling and behavior.

def container(*, height=None, border=None):
    """
    Create generic container for grouping content with optional styling.

    Args:
        height (int, optional): Container height in pixels
        border (bool, optional): Whether to show container border

    Returns:
        DeltaGenerator: Container context manager
    """

def empty():
    """
    Create placeholder container that can be filled later.

    Returns:
        DeltaGenerator: Empty placeholder container
    """

Example usage:

# Create bordered container
with st.container(border=True):
    st.write("Content inside bordered container")

# Create placeholder for later use
placeholder = st.empty()
# Later fill the placeholder
placeholder.write("Dynamic content")

Expandable Containers

Collapsible containers for organizing content that can be shown or hidden.

def expander(label, *, expanded=False, icon=None):
    """
    Create expandable/collapsible container with toggle functionality.

    Args:
        label (str): Expander header text
        expanded (bool): Whether to start in expanded state
        icon (str, optional): Icon name or emoji for header

    Returns:
        DeltaGenerator: Expandable container context manager
    """

def popover(label, *, help=None, disabled=False, use_container_width=False, icon=None):
    """
    Create popover container that opens on button click.

    Args:
        label (str): Popover button text
        help (str, optional): Tooltip text for button
        disabled (bool): Whether popover button is disabled
        use_container_width (bool): Whether button uses full container width
        icon (str, optional): Icon name or emoji for button

    Returns:
        DeltaGenerator: Popover container context manager
    """

Example usage:

# Create expander
with st.expander("Show details", expanded=False):
    st.write("Detailed information here")

# Create popover
with st.popover("Options"):
    st.write("Popover content")
    option = st.selectbox("Choose:", ["A", "B", "C"])

Sidebar

Dedicated sidebar container for navigation and secondary content.

sidebar: DeltaGenerator

The sidebar object provides access to the sidebar container where you can place widgets and content that appears in a collapsible side panel.

Example usage:

# Add content to sidebar
st.sidebar.title("Navigation")
st.sidebar.selectbox("Choose page:", ["Home", "About", "Contact"])

# Sidebar can contain any widget or display element
with st.sidebar:
    st.write("Sidebar content")
    user_input = st.text_input("Enter value:")

Status and Progress Elements

Containers and widgets for showing status, progress, and temporary states.

def status(label, *, expanded=False, state="running"):
    """
    Create status container that shows operation progress with state indicator.

    Args:
        label (str): Status label/description
        expanded (bool): Whether to show details by default
        state (str): Status state ("running", "complete", "error")

    Returns:
        DeltaGenerator: Status container context manager
    """

def progress(value, *, text=None, help=None):
    """
    Display progress bar with optional text label.

    Args:
        value (float): Progress value between 0.0 and 1.0
        text (str, optional): Text label for progress bar
        help (str, optional): Tooltip text

    Returns:
        DeltaGenerator: Progress bar element that can be updated
    """

def spinner(text=""):
    """
    Display loading spinner with optional text during long operations.

    Args:
        text (str): Loading message text

    Returns:
        ContextManager: Spinner context manager for use with 'with' statement
    """

Example usage:

# Status container
with st.status("Processing data...", expanded=True):
    st.write("Loading dataset")
    # ... processing code ...
    st.write("Analysis complete")

# Progress bar
progress_bar = st.progress(0, text="Starting...")
for i in range(100):
    progress_bar.progress(i + 1, text=f"Processing {i+1}/100")

# Spinner for long operations
with st.spinner("Loading..."):
    time.sleep(5)  # Long operation
st.success("Done!")

Message and Alert Containers

Containers for displaying status messages, alerts, and notifications.

def success(body, *, icon=None, help=None):
    """
    Display success message with green styling.

    Args:
        body (str): Success message text
        icon (str, optional): Custom icon (default checkmark)
        help (str, optional): Tooltip text
    """

def info(body, *, icon=None, help=None):
    """
    Display informational message with blue styling.

    Args:
        body (str): Info message text
        icon (str, optional): Custom icon (default info icon)
        help (str, optional): Tooltip text
    """

def warning(body, *, icon=None, help=None):
    """
    Display warning message with yellow styling.

    Args:
        body (str): Warning message text
        icon (str, optional): Custom icon (default warning icon)
        help (str, optional): Tooltip text
    """

def error(body, *, icon=None, help=None):
    """
    Display error message with red styling.

    Args:
        body (str): Error message text
        icon (str, optional): Custom icon (default error icon)
        help (str, optional): Tooltip text
    """

def exception(exception, *, help=None):
    """
    Display formatted exception with traceback information.

    Args:
        exception (Exception): Exception object to display
        help (str, optional): Tooltip text
    """

def toast(body, *, icon=None, duration="short"):
    """
    Display temporary toast notification that auto-dismisses.

    Args:
        body (str): Toast message text
        icon (str, optional): Icon name or emoji
        duration (str or int, optional): How long to show toast ("short", "long", "infinite", or seconds)
    """

Example usage:

# Message containers
st.success("Operation completed successfully!")
st.info("This is informational content")
st.warning("Please review your input")
st.error("An error occurred")

# Exception display
try:
    risky_operation()
except Exception as e:
    st.exception(e)

# Toast notification
st.toast("File saved!", icon="✅")

Animation and Visual Effects

Functions for adding visual flair and celebratory effects.

def balloons():
    """Display floating balloons animation for celebration."""

def snow():
    """Display falling snow animation for celebration."""

Example usage:

# Celebratory animations
if user_completed_task:
    st.balloons()  # Show balloons

if holiday_theme:
    st.snow()  # Show snow effect

Layout Patterns

Common layout patterns and best practices:

Multi-Column Layouts

# Equal columns
col1, col2, col3 = st.columns(3)

# Custom column widths
col1, col2 = st.columns([3, 1])  # 3:1 ratio

# With gap control
col1, col2 = st.columns(2, gap="large")

Nested Containers

# Container within container
with st.container(border=True):
    col1, col2 = st.columns(2)
    with col1:
        with st.expander("Details"):
            st.write("Nested content")

Sidebar Layout

# Sidebar with main content
with st.sidebar:
    page = st.selectbox("Navigate:", ["Home", "Data", "Settings"])

# Main content area
if page == "Home":
    st.title("Welcome")
elif page == "Data":
    st.dataframe(data)

Form Layout

# Form with organized layout
with st.form("user_form"):
    col1, col2 = st.columns(2)
    with col1:
        name = st.text_input("Name")
        email = st.text_input("Email")
    with col2:
        age = st.number_input("Age", min_value=0)
        country = st.selectbox("Country", countries)

    submitted = st.form_submit_button("Submit")

Tab Organization

# Tabbed interface
tab1, tab2, tab3 = st.tabs(["Overview", "Details", "Settings"])

with tab1:
    st.metric("Users", 1234)
    st.line_chart(overview_data)

with tab2:
    st.dataframe(detailed_data)

with tab3:
    settings = st.form("settings_form")

Install with Tessl CLI

npx tessl i tessl/pypi-streamlit

docs

advanced-features.md

caching-performance.md

components-config.md

display-elements.md

index.md

input-widgets.md

layout-containers.md

navigation-pages.md

state-management.md

user-auth.md

tile.json