sidebarLayout: Layout a sidebar and main area

In shinybootstrap2: Bootstrap 2 Web Components for Use with Shiny

Description

Create a layout with a sidebar and main area. The sidebar is displayed with a distinct background color and typically contains input controls. The main area occupies 2/3 of the horizontal width and typically contains outputs.

Usage

sidebarLayout(sidebarPanel, mainPanel, position = c("left", "right"),
  fluid = TRUE)

Arguments

sidebarPanel	The sidebarPanel containing input controls
mainPanel	The mainPanel containing outputs
position	The position of the sidebar relative to the main area ("left" or "right")
fluid	TRUE to use fluid layout; FALSE to use fixed layout.

Examples

library(shiny)

# Define UI
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")
    )
  )
)

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>

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