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

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 125

## file: app.R
library(shiny)
library(bslib)
library(htmltools)

ui <- page_fillable(
  absolutePanel( 
    wellPanel(
      titlePanel("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",
  )
)
# Define server logic required to draw a histogram ----
server <- function(input, output) {
}

# Create Shiny app ----
shinyApp(ui = ui, server = server)

library(shiny)
library(bslib)
library(htmltools)

ui <- page_fillable(
  absolutePanel( 
    wellPanel(
      titlePanel("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",
  )
)
# Define server logic required to draw a histogram ----
server <- function(input, output) {
}

# Create Shiny app ----
shinyApp(ui = ui, server = server)

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

First, to create the floating panel:

1. Use the absolutePanel() to create a floating element.

2. The initial unamed argument(s) passed into absolutePanel() will be the contents for the absolutePanel().

   • The example shown uses a wellPanel() to put a nice visual bounding box so you know what can be moved.

3. Position the absolutePanel() using the top, bottom, left, and/or right parameters. Set the size of the panel using the height and/or width parameters.

4. 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 img() to create this effect:

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

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

See also: fixedPanel(). fixedPanel() 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

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 320

## file: app.R
library(shiny)
library(bslib)

ui <- page_fillable(
  layout_columns( 
    card( 
      card_header("Card 1 header"),
      p("Card 1 body"),
      sliderInput("slider", "Slider", 0, 10, 5),
    ), 
    card( 
      card_header("Card 2 header"),
      p("Card 2 body"),
      textInput("text", "Add text", ""),
    ), 
  ) 
)

server <- function(input, output) {
}

# Create Shiny app ----
shinyApp(ui = ui, server = server)

library(shiny)
library(bslib)

ui <- page_fillable(
  layout_columns( 
    card( 
      card_header("Card 1 header"),
      p("Card 1 body"),
      sliderInput("slider", "Slider", 0, 10, 5),
    ), 
    card( 
      card_header("Card 2 header"),
      p("Card 2 body"),
      textInput("text", "Add text", ""),
    ), 
  ) 
)

server <- function(input, output) {
}

# Create Shiny app ----
shinyApp(ui = ui, server = 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 card() inside any Shiny UI page method (e.g., page_fillable(), layout_columns()) to create a card. Add additional cards by adding additional calls to card().

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

3. Control the appearance and functionality of each card by passing additional arguments to 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.