[Feature]: Pass additional parameters from `navset_card_*()` to `card()`

[Steven314]

Category

UI Components

Scope

Quality of Life

Problem

I came across a situation where I wanted a navset_card_pill inside an outer card. The navset card held several elements under each tab, meaning the inner card needed a scrollbar to view all elements. My preference in this scenario would have been to have the outer card scroll and the inner card expand to its full height. The trouble is that you can't pass additional parameters to navset_card_pill such as style, height, or fill.

My workaround was to wrap the navset_card_pill in a div to set height="auto". This was fine. It has a minor inconvenience of extra margin below the inner card, but that isn't very difficult to correct with some CSS.

Reproducible Example

Observe the scrolling behavior of the left column when the window height is small (for example on a mobile device in landscape mode). The navset card is becomes very short and is forced to scroll.

from shiny import App, ui

import lorem

app_ui = ui.page_navbar(
   ui.nav_panel(
       "Main",
       ui.layout_columns(
           ui.card(
               ui.card_header("Outer Card"),
               ui.p("Some UI element above"),
               ui.navset_card_pill(
                   ui.nav_panel("Tab 1", ui.p(lorem.get_paragraph(3))),
                   # can't pass additional arguments through to card()
               ),
               ui.p("Some UI element below"),
           ),
           ui.card("Right column", ui.p(lorem.get_paragraph(3))),
           col_widths=[6, 6],
       ),
   ),
   title="App",
   fillable=True,
)


def server(input, output, session):
   pass


app = App(app_ui, server)

An example of the workaround:

Details

from shiny import App, ui

import lorem

app_ui = ui.page_navbar(
    ui.nav_panel(
        "Main",
        ui.layout_columns(
            ui.card(
                ui.card_header("Outer Card"),
                ui.p("Some UI element above"),
                ui.div(
                    ui.navset_card_pill(
                        ui.nav_panel("Tab 1", ui.p(lorem.get_paragraph(3))),
                    ),
                    height="auto",
                ),
                ui.p("Some UI element below"),
            ),
            ui.card("Right column", ui.p(lorem.get_paragraph(3))),
            col_widths=[6, 6],
        ),
    ),
    title="App",
    fillable=True,
)


def server(input, output, session):
    pass


app = App(app_ui, server)

Shiny: 1.6.2
Python: 3.14.5
OS: Windows 11
Browser: tested in Firefox and Chrome

Solution

Similar to #1451, passing through other parameters to card() would be useful. That would offer more freedom for users to style the navset_card_* cards. Perhaps kwargs would be suitable here?

Alternatives (Optional)

No response

Example (Optional)

Impact (Optional)

No response

Contribution? (Optional)

Yes, I can implement (or help).