DOCSEARCHbyAlgolia
Submit Docs

bs4Dash

repository·master·Indexed 19 days ago

https://github.com/rinterface/bs4dash

An R package providing a Bootstrap 4-based dashboard interface for Shiny applications using the AdminLTE3 framework. It offers enhanced UI components and layouts, maintains compatibility with many shinydashboard function calls for easier migration, and includes a built-in gallery via bs4DashGallery().

Tokens
1.3K
Snippets
6
Records
7
Agent score
16%

What's inside bs4Dash

  2. Fix content resizing on card maximize/minimize

    master

    AdminLTE3's 'maximize' feature changes the dimensions of a box, but Shiny does not automatically know when to resize its internal content (like plots or tables) to fit the new size.

    To resolve this, you must trigger the shown event within the maximize and minimize prototypes in adminlte.js. This tells Shiny to recalculate and resize the content. Additionally, ensure that any delay() functions used during the transition are managed so that input bindings remain functional.

    // Inside maximize prototype
$(this).trigger('shown');

// Inside minimize prototype
$(this).trigger('shown');

  3. Install bs4Dash

    master

    You can install bs4Dash using several methods depending on whether you want the stable CRAN version or the latest development versions.

    From CRAN (Stable)

    Use the standard installation command for the stable release.

    From r-universe (Latest Development)

    Use this to get the latest development builds from the r-universe repository.

    From GitHub (Latest Development)

    Use pak to install directly from the GitHub repository.

    # from CRAN
install.packages("bs4Dash")

# latest devel version from r-universe
install.packages("bs4Dash", repos = c("cynkra.r-universe.dev", "cloud.r-project.org"))

# latest devel version
pak::pak("RinteRface/bs4Dash")

  4. Fix content visibility on card expand/collapse

    master

    When using cards that start in a collapsed state, Shiny might not automatically detect the change in visibility when the card is expanded. To fix this, you must trigger the appropriate Bootstrap collapse events within the adminlte.js prototypes so Shiny can react to the state change.

    • In the collapse prototype: trigger hidden.bs.collapse on the parent.
    • In the expand prototype: trigger shown.bs.collapse on the parent.
    // Inside collapse prototype
_this._parent.trigger("hidden.bs.collapse");

// Inside expand prototype
_this2._parent.trigger("shown.bs.collapse");

  5. Migrate from {shinydashboard} to {bs4Dash}

    master

    Transitioning from {shinydashboard} to {bs4Dash} is straightforward because bs4Dash maintains compatibility with many existing shinydashboard function calls (like dashboardPage, dashboardHeader, dashboardSidebar, dashboardBody, fluidRow, and box).

    To migrate, you primarily need to replace library(shinydashboard) with library(bs4Dash) in your application script.

    library(shiny)
library(bs4Dash)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      box(plotOutput("plot1", height = 250)),

      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

  6. Ensure shinyFiles compatibility in bs4Dash

    master

    Because shinyFiles is based on Bootstrap 3, it may conflict with the default AdminLTE3/bs4Dash CSS. To ensure proper modal rendering when using shinyFiles, you may need to adjust the .modal-header styles. Specifically, avoid using flexbox properties on the .modal-header if they cause layout issues, and instead use standard padding and border properties.

    .modal-header {
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}