Layouts

The 'objects' referred to within the layouts could be single elements such as a plot, table, image or piece of text, or a panel containing multiple elements. Panels can be nested within panels.

sidebarLayout()

Contains a sidebarPanel and a mainPanel

mainPanel()

This is a classic simple layout that is often used to keep user input components in the sidebar separate from the outputs in the mainPanel, though there are no restrictions on the placement of elements. Inputs can be located in the main panel and outputs in the sidebar, or some in one, and some in the other.

Single elements can be added one by one in the main panel or they could be nested inside other panels

The width of the sidebar can be adjusted by setting the width argument, by default it is 4.

The widths of the sidebarPanel and mainPanel should add up to 12, as in the fluidRow examples in the next tab.

sidebarLayout(
          sidebarPanel(width = 3,
            h3("sidebarPanel()"),
            p("The sidebar panel generally contains input fields"),
            textInput("", "", placeholder = "Enter text here"),
            br(),
            fileInput("", label = "Choose file")
          ),
          mainPanel(width = 9,
            h3("mainPanel()"),
            h4("This is a classic simple layout that is often used to keep user input components in the sidebar separate from
               the outputs in the mainPanel, though there are no restrictions on the placement of elements. Inputs can be located in the main panel and outputs in the sidebar, or some in one, and some in the other."),
            h4("Single elements can be added one by one in the main panel or they could be nested inside other 
               panels"),
            h4("The width of the sidebar can be adjusted by setting the width argument, by default it is 4."),
            h4("The widths of the sidebarPanel and mainPanel should add up to 12, as in the fluidRow examples in the next tab.")
          )
        )

fluidRow()

To put components on the same row. The page is 12 units wide.

column(width = 6)

The page contains 12 units, so the widths of the columns can add up to 12.

column(width = 6)

If the page is resized, these elements may stack up vertically on each other.

column(width = 4)

Multiple elements can be placed in a column

column(width = 7)

If the widths add up to less than 12, there may be an empty space at the end.

column(width = 3)

column(width = 4)

column(width = 3, offset = 2)

The code for colouring these columns has been removed from the code below to simplify it.

fluidRow(
          column(width = 6,  
                 h4("column(width = 6)"), p("The page contains 12 units, so the widths of the columns can add up to 12.")),
          column(width = 6,   
                 h4("column(width = 6)"), p("If the page is resized, these elements may stack up vertically on each other."))
        ),
        br(),
        fluidRow(
          column(width = 4,  
                 h4("column(width = 4)")),
          column(width = 7,   
                 h4("column(width = 7)"), p("If the widths add up to less than 12, there may be an empty space at the end."))
        ),
        br(),
        fluidRow(
          column(width = 3,  
                 h4("column(width = 3)")),
          column(width = 4,   
                 h4("column(width = 4)")),
          column(width = 3, offset = 2,  
                 h4("column(width = 3, offset = 2)"))
        )

flowLayout()

Elements are arranged left-to-right, top-to-bottom. If the page is resized, elements may move around.

object 1

object 2, maybe a plot

object 3, could be a table

object 4, some text

object 5, an image

splitLayout()

The page is split horizontally to fit in the components. By default, equal width is given to each component but this can be adjusted using the cellWidths argument. If the page is resized the components may change width but they do not flow on to separate lines.

object 1, maybe a plot

object 2, could be a table

object 3, a panel containing multiple elements

verticalLayout()

For arranging objects vertically.

object 1

This could be a single elements like plots and pieces of text, or panels containing multiple elements

object 2

maybe a plot

object 3

could be a table

flowLayout() with different types of panel

This is a flowLayout() just as in the flowLayout tab, but each element here is a panel. The third one is a conditional panel and requires the checkbox in the 2nd panel to be ticked in order to appear.

wellPanel()

slightly inset border and grey background

wellPanel()

This one contains a checkbox

show next panel

conditionalPanel()

Creates a panel that is visible or not, depending on the value of a JavaScript expression

titlePanel(), for creating an application title

inputPanel()

A flowLayout() with a grey border and light grey background, suitable for wrapping inputs

If the checkbox is selected, more panels appear including an absolutePanel()

show some messy panels

This is a conditional panel that has other panels nested within it, the code is the same as the set of panels above, except the first wellPanel has been swapped for an absolutePanel.

absolutePanel()

contents are absolutely positioned

not generally recommended

wellPanel()

This one contains a checkbox

show next panel

conditionalPanel()

Creates a panel that is visible or not, depending on the value of a JavaScript expression

titlePanel(), for creating an application title

inputPanel()

A flowLayout() with a grey border and light grey background, suitable for wrapping inputs

tabPanel layouts

There are 3 different types of tabPanel layouts. The first shown here, tabsetPanel(), is also used in the main application to show the different types of layouts.

tabsetPanel()

tab2 panel contents

tab3 panel contents

navlistPanel()

tab1 panel contents

tab2 panel contents

tab3 panel contents

navbarPage()

tab1 panel contents

tab2 panel contents

tab3 panel contents

tabsetPanel(
            tabPanel("tab1",
                     plotOutput(outputId = "tab1_plot", width = "300px", height = "300px"),
                     tableOutput(outputId = "tab1_table"),
                     textOutput(outputId  = "tab1_text")
                     ),
            tabPanel("tab2", br(), "tab2 panel contents"),
            tabPanel("tab3", br(), "tab3 panel contents")
        ),

navlistPanel(
           tabPanel("tab1", "tab1 panel contents"),
           tabPanel("tab2", "tab2 panel contents"),
           tabPanel("tab3", "tab3 panel contents")
         )

navbarPage(
            title = "Title here",
            tabPanel("tab1", "tab1 panel contents",
            tabPanel("tab2", "tab2 panel contents",
            tabPanel("tab3", "tab3 panel contents")
         )