11.6 UI: Layout advanced

11.6.1 tabsetPanel and tabPanel

  • tabsetPanel() + tabPanel()
    • Allows for using sidebar layout but dividing main panel into tabs
    • Users can switch between tabs
    • Tabs can be used to display various outputs simultanously (rather than putting them all on one page)
  • navbarPage(): Create a multi-page user-interface that includes a navigation bar
  • fluidRow() and column(): Build layout up from grid system

11.6.3 Images

  • img() function places an image
  • Store image locally
    • Store in extra folder www
    • www folder stores all sorts of additional files(images, data etc.)
    • If working directory = app directory create with: dir.create("www") Exercise: UI + Images

  1. Create a new app (using the example codes)
  2. The title (title panel) is “Two big names in the social sciences”
  3. Download the images of Popper and Weber from the web.
  4. Store the images in the www folder.
  5. Build a UI that contains those images (stored in the www folder). One in the sidebar and one in the main panel.
  6. Add the captions “Popper” and “Weber”. One bold and blue, the other one italic.