rstudio / bslib

Tools for theming Shiny and R Markdown via Bootstrap 3, 4, or 5.
https://rstudio.github.io/bslib/
Other
482 stars 58 forks source link

Improve `navset_pill_list()` width and styles #980

Open gadenbuie opened 8 months ago

gadenbuie commented 8 months ago

As described in https://github.com/posit-dev/py-shiny/issues/1112, the layout and width of navset_pill_list(), at least when using the function defaults, could be improved.

corey-dawson commented 8 months ago

In addition, should include

  1. max-width for the vertical navigation menu (the part with the nav items). Should scale similar to sidebar
  2. total width of the widget (already exists)
  3. height: I don't want the widget changing sizes per nav item selected. Widget should have a set height property so each output pane is the same height (currently have to create a div with a set height for each nav item panel to achieve a clean height)
  4. I would like to use this as a sidebar sometimes. instead of having a sidebar with inputs, have this as a sidebar with navigation objects. Anything to make this more streamlined. Also, having the ability to add other objects below the nav items like a button could be useful
gadenbuie commented 8 months ago

4. I would like to use this as a sidebar sometimes. instead of having a sidebar with inputs, have this as a sidebar with navigation objects. Anything to make this more streamlined. Also, having the ability to add other objects below the nav items like a button could be useful

Thanks! We've been planning to implement sidebar navigation for a while and are tracking that work and relevant suggestions in #585.

baderd commented 2 months ago

I made a page_fillable() dashboard that contains a navset_pill_list(). Is it desired that the navset_pill_list() sets the card_body() height to 400px? For me this was unexpected in this context.

Is there maybe a workaround with the as_fill_carrier() / as_fillable_container() functions? I did not manage to get it working.

My code:

library(bslib)
library(DT)

ui <- page_fillable(
  navset_pill_list(nav_panel(  # Sets card_body height to 400px, why?
    title = "Page one",
    card(
      card_header("My table"),
      card_body(DT::DTOutput("dt"))
    )
  ))
)

server <- function(input, output) {
  output$dt <- DT::renderDT({
    DT::datatable(
      mtcars, fillContainer = TRUE,
      options = list(pageLength = nrow(mtcars)) # show all cars at once
    )
  })
}

shiny::shinyApp(
  ui = ui, server = server, options = list(launch.browser = FALSE)
)

Screenshot:

image