ui.fill.as_fill_item

ui.fill.as_fill_item(tag)

Coerce a tag to a fill item.

Filling layouts are built on the foundation of fillable containers and fill items (fill carriers are both fillable containers and fill items). This is why most UI components (e.g., card, layout_sidebar) possess both fillable and fill arguments (to control their fill behavior). However, sometimes it's useful to add, remove, and/or test fillable/fill properties on arbitrary Tag, which these functions are designed to do.

Parameters

tag: TagT

a Tag object.

Returns

Type	Description
TagT	A copy of the original Tag object (tag) with additional attributes (and an HTMLDependency).

See Also

• as_fillable_container
• remove_all_fill

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from __future__ import annotations

import htmltools

from shiny import App, ui
from shiny.ui import fill


def outer_inner() -> htmltools.Tag:
    inner = ui.div(
        id="inner",
        style=htmltools.css(
            height="200px",
            border="3px blue solid",
        ),
    )
    outer = ui.div(
        inner,
        id="outer",
        style=htmltools.css(
            height="300px",
            border="3px red solid",
        ),
    )
    return outer


outer0 = outer_inner()

outer1 = outer_inner()
outer1.children[0] = fill.as_fill_item(outer1.children[0])

outer2 = outer_inner()
outer2 = fill.as_fillable_container(outer2)
outer2.children[0] = fill.as_fill_item(outer2.children[0])


app_ui = ui.page_fluid(
    ui.markdown(
        """\
        # `as_fill_item()`

        For an item to fill its parent element,
        * the item must have `as_fill_item()` be called on it
        * the parent container must have `as_fillable_container()` called on it

        If both methods are called, the inner child will naturally expand into its parent container.
        """
    ),
    ui.row(
        ui.column(4, ui.h5("Default behavior")),
        ui.column(4, ui.h5(ui.markdown("`as_fill_item(blue)`"))),
        ui.column(
            4,
            ui.h5(ui.markdown("`as_fill_item(blue)` + `as_fillable_container(red)`")),
        ),
    ),
    ui.row(
        ui.column(4, ui.div(outer0)),
        ui.column(4, ui.div(outer1)),
        ui.column(4, ui.span(outer2)),
    ),
)


app = App(app_ui, server=None)