Mastering Shiny

Chapter 6. Layout, Themes, HTML

Introduction

In this chapter you’ll unlock some new tools for controlling the overall appearance of your app. We’ll start by talking about page layouts (both single and “multiple”) that let you organize your inputs and outputs. Then you’ll learn about Bootstrap, the CSS toolkit that Shiny uses, and how to customize its overall visual appearance with themes. We’ll finish with a brief discussion of what’s going on under the hood so that if you know HTML and CSS, you can customize Shiny apps still further. As usual, we begin by loading shiny:

library(shiny)

Single-Page Layouts

In Chapter 2 you learned about the inputs and outputs that form the interactive components of the app. But I didn’t talk about how to lay them out on the page, and instead I just used fluidPage() to slap them together as quickly as possible. While this is fine for learning Shiny, it doesn’t create usable or visually appealing apps, so now it’s time to learn some more layout functions.

Layout functions provide the high-level visual structure of an app. Layouts are created by a hierarchy of function calls, where the hierarchy in R matches the hierarchy in the generated HTML. This helps you understand layout code. For example, when you look at layout code like this:

fluidPage(
  titlePanel("Hello Shiny!"),
  sidebarLayout(
    sidebarPanel(
      sliderInput("obs", "Observations:", min = 0, max = 1000, value = 500)
    ),
    mainPanel(
      plotOutput("distPlot")
    )
  )
)

focus on the hierarchy of the function ...