fluidPage: Create a page with fluid layout

In shinybootstrap2: Bootstrap 2 Web Components for Use with Shiny

Description

Functions for creating fluid page layouts. A fluid page layout consists of rows which in turn include columns. Rows exist for the purpose of making sure their elements appear on the same line (if the browser has adequate width). Columns exist for the purpose of defining how much horizontal space within a 12-unit wide grid it's elements should occupy. Fluid pages scale their components in realtime to fill all available browser width.

Usage

fluidPage(..., title = NULL, responsive = TRUE, theme = NULL)

fluidRow(...)

Arguments

...	Elements to include within the page
title	The browser window title (defaults to the host URL of the page). Can also be set as a side effect of the titlePanel function.
responsive	TRUE to use responsive layout (automatically adapt and resize page elements based on the size of the viewing device)
theme	Alternative Bootstrap stylesheet (normally a css file within the www directory). For example, to use the theme located at www/bootstrap.css you would use theme = "bootstrap.css".

Details

To create a fluid page use the fluidPage function and include instances of fluidRow and column within it. As an alternative to low-level row and column functions you can also use higher-level layout functions like sidebarLayout.

Value

A UI defintion that can be passed to the shinyUI function.

Note

See the Shiny-Application-Layout-Guide for additional details on laying out fluid pages.

See Also

column, sidebarLayout

Examples

library(shiny)

fluidPage(

  # Application title
  titlePanel("Hello Shiny!"),

  sidebarLayout(

    # Sidebar with a slider input
    sidebarPanel(
      sliderInput("obs",
                  "Number of observations:",
                  min = 0,
                  max = 1000,
                  value = 500)
    ),

    # Show a plot of the generated distribution
    mainPanel(
      plotOutput("distPlot")
    )
  )
)

fluidPage(
  title = "Hello Shiny!",
  fluidRow(
    column(width = 4,
      "4"
    ),
    column(width = 3, offset = 2,
      "3 offset 2"
    )
  )
)

Example output

You probably do not want to attach this package (with library() or require()). Instead, you should use shinybootstrap2::withBootstrap2(). You can hide this message with suppressPackageStartupMessages().

Attaching package: 'shiny'

The following objects are masked from 'package:shinybootstrap2':

    animationOptions, basicPage, bootstrapPage, checkboxGroupInput,
    checkboxInput, column, dataTableOutput, dateInput, dateRangeInput,
    fixedPage, fixedRow, fluidPage, fluidRow, headerPanel, icon,
    mainPanel, navbarPage, navlistPanel, numericInput, pageWithSidebar,
    radioButtons, selectInput, selectizeInput, sidebarLayout,
    sidebarPanel, sliderInput, submitButton, textInput, titlePanel,
    updateCheckboxGroupInput, updateRadioButtons, updateSliderInput,
    verticalLayout

<div class="container-fluid">
  <h2>Hello Shiny!</h2>
  <div class="row">
    <div class="col-sm-4">
      <form class="well">
        <div class="form-group shiny-input-container">
          <label class="control-label" for="obs">Number of observations:</label>
          <input class="js-range-slider" id="obs" data-min="0" data-max="1000" data-from="500" data-step="1" data-grid="true" data-grid-num="10" data-grid-snap="false" data-prettify-separator="," data-prettify-enabled="true" data-keyboard="true" data-data-type="number"/>
        </div>
      </form>
    </div>
    <div class="col-sm-8">
      <div id="distPlot" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">4</div>
    <div class="col-sm-3 col-sm-offset-2">3 offset 2</div>
  </div>
</div>

shinybootstrap2 documentation built on May 2, 2019, 4:05 p.m.