Organize the elements in the UI
Start with a new file: intro-shiny/babynames/01-layout/app-baby-01.R
With inputs and outputs established in the UI, we can arrange them with various layout functions.
For readability, each of the existing UI elements will be set to its own variable in the global section, above ui
.
title <- titlePanel("U.S. Baby Names")
src <- p("Source:",
tags$a(href = "https://www.ssa.gov/oact/babynames/limits.html",
"Social Security Administration"))
txt_box <- textInput("name",
label = "Enter name",
placeholder = "Jane")
txt_disp <- textOutput("name_entered")
tbl_disp <- tableOutput("main_table")
Some UI functions are pre-set like sidebarLayout()
.
ui <- fluidPage(
title,
src,
# A sidebarLayout with sidebarPanel and mainPanel
sidebarLayout(
sidebarPanel(),
mainPanel()
)
)
Place content within sidebarPanel()
and mainPanel()
.
ui <- fluidPage(
title,
src,
# A sidebarLayout with sidebarPanel and mainPanel
sidebarLayout(
sidebarPanel(
txt_box,
txt_disp
),
mainPanel(
tbl_disp
)
)
)
In lieu of pre-defined layouts, you can build your layout with rows and columns using fluidRow()
or fixedRow()
. columns()
are created within *Row()
.
You can also embed rows and columns within pre-defined layouts like in the example below.
ui <- fluidPage(
title,
src,
# A sidebarLayout with sidebarPanel and mainPanel
sidebarLayout(
sidebarPanel(
txt_box,
txt_disp
),
mainPanel(
# create columns within fluidRow or fixedRow
fluidRow(
column(
width = 6,
h3("Table"),
tbl_disp
),
column(
width = 6,
# add a place holder for a plot
h3("Plot"),
plotOutput("plot")
)
)
)
)
)
While we’re in the UI, let’s add some additional inputs to the sidebar.
ui <- fluidPage(
title,
src,
# sidebar layout with sidebarPanel and mainPanel
sidebarLayout(
sidebarPanel(
txt_box,
txt_disp,
# add a dropdown menu to select state
selectInput("state",
label = 'Select State',
choices = unique(df$state),
selected = 'Washington')
),
mainPanel(
fluidRow(
column(
width = 6,
h3("Table"),
tbl_disp
),
column(
width = 6,
# add a place holder for a plot
h3("Plot"),
plotOutput("plot")
)
)
)
)
)