Panels and cards

Use panels and cards to define areas of related content in your Shiny app.

Use panels and cards to define areas of related content.

Floating panel

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 320

## file: app.py
from htmltools import css
from shiny import App, ui

app_ui = ui.page_fillable(
    ui.panel_absolute(  
        ui.panel_well(
            ui.panel_title("Draggable panel"),
            "Move this panel anywhere you want.",
        ),
        width="300px",  
        right="50px",  
        top="50px",  
        draggable=True,  
    ),  
    style=css(
        background_image="url(https://unsplash.com/photos/XKXGghL7GQc/download?force=true&w=1920)",
        background_repeat="no-repeat",
        background_size="cover",
        background_position="center bottom",
    ),
)


def server(input, output, session):
    pass


app = App(app_ui, server)

Express

from functools import partial

from htmltools import css
from shiny.express import ui
from shiny.ui import page_fillable

page_style = css(
    background_image="url(https://unsplash.com/photos/XKXGghL7GQc/download?force=true&w=1920)",
    background_repeat="no-repeat",
    background_size="cover",
    background_position="center bottom",
)

ui.page_opts(page_fn=partial(page_fillable, style=page_style))

with ui.panel_absolute(  
    width="300px",  
    right="50px",  
    top="50px",  
    draggable=True,  
):  
    with ui.panel_well():
        ui.h2("Draggable panel")
        "Move this panel anywhere you want."

Core

from htmltools import css
from shiny import App, ui

app_ui = ui.page_fillable(
    ui.panel_absolute(  
        ui.panel_well(
            ui.panel_title("Draggable panel"),
            "Move this panel anywhere you want.",
        ),
        width="300px",  
        right="50px",  
        top="50px",  
        draggable=True,  
    ),  
    style=css(
        background_image="url(https://unsplash.com/photos/XKXGghL7GQc/download?force=true&w=1920)",
        background_repeat="no-repeat",
        background_size="cover",
        background_position="center bottom",
    ),
)


def server(input, output, session):
    pass


app = App(app_ui, server)

Follow these steps to create an app that has a panel floating over a main image.

First, to create the floating panel:

1. Pass ui.panel_absolute() as the second argument of your Shiny UI page method, after ui.img(). Pass elements that you want to appear inside the panel to ui.panel_absolute().

2. Position the panel using the top, bottom, left, and/or right parameters. Set the size of the panel using the height and/or width parameters.

3. If you want the panel to be draggable, set the draggable parameter to True.

In the example above, we used CSS to add a scaling background image to the page. You can also use ui.img() to create this effect:

1. Pass ui.img() to any Shiny UI page method (e.g., ui.page_fluid()). ui.img() creates an image.

2. Pass the path or URL of your desired image to ui.img()’s src parameter. Set additional parameters to control the appearance of the image (e.g., width and height).

See also: ui.panel_fixed(). ui.panel_fixed() is equivalent to calling ui.panel_absolute() with fixed=True (i.e., the panel does not scroll with the rest of the page).

Content divided by cards

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 320

## file: app.py
from shiny import App, ui

app_ui = ui.page_fillable(
    ui.layout_columns(  
        ui.card(  
            ui.card_header("Card 1 header"),
            ui.p("Card 1 body"),
            ui.input_slider("slider", "Slider", 0, 10, 5),
        ),  
        ui.card(  
            ui.card_header("Card 2 header"),
            ui.p("Card 2 body"),
            ui.input_text("text", "Add text", ""),
        ),  
    )  
)


def server(input, output, session):
    pass


app = App(app_ui, server)

Express

from shiny.express import ui

ui.page_opts(fillable=True)

with ui.layout_columns():  
    with ui.card():  
        ui.card_header("Card 1 header")
        ui.p("Card 1 body")
        ui.input_slider("slider", "Slider", 0, 10, 5)

    with ui.card():  
        ui.card_header("Card 2 header")
        ui.p("Card 2 body")
        ui.input_text("text", "Add text", "")

Core

from shiny import App, ui

app_ui = ui.page_fillable(
    ui.layout_columns(  
        ui.card(  
            ui.card_header("Card 1 header"),
            ui.p("Card 1 body"),
            ui.input_slider("slider", "Slider", 0, 10, 5),
        ),  
        ui.card(  
            ui.card_header("Card 2 header"),
            ui.p("Card 2 body"),
            ui.input_text("text", "Add text", ""),
        ),  
    )  
)


def server(input, output, session):
    pass


app = App(app_ui, server)

Cards are general purpose containers used to group related UI elements together with a border and optional padding.

Follow these steps to create an app with content separated into cards:

1. Add ui.card() inside any Shiny UI page method (e.g., ui.page_fluid()) to create a card. Add additional cards by adding additional calls to ui.card().

2. Define the contents of each card. Inside ui.card(), pass elements that you would like to appear inside the card (e.g., inputs, text). You can also use ui.card_header() and ui.card_footer() to create a card header and footer.

3. Control the appearance and functionality of each card by passing additional arguments to ui.card(). For example, you can set full_screen to True to allow the user to expand the card to fullscreen, or control the height of the card with the height parameter.