R语言 shiny布局

titlePanel :标题面板,创建包含应用程序标题的面板

用法:titlePanel(title, windowTitle = title)

windowTitle:浏览器窗口应该显示的标题

sidebarLayout(

sidebarPanel(

)

mainPanel(

)

)

sidebarLayout:侧栏和主要区域的布局

sidebarPanel:创建包含输入空间的侧边栏面板,这些控件可以依次传递给sidebarLayout

mainPanel:创建一个主面板,其中包含可以依次传递到输出的元素给sidebarLayout

应用布局指南

概观

Shiny包括许多用于布置应用程序组件的工具。应用程序布局功能:

1.简单的默认布局,带有用于输入的侧栏和用于输出的大型主区域。

2.使用shiny网格布局系统自定义应用程序布局。

3.使用tabsetPanel()和navlistPanel()函数分割布局。

4.使用该navbarPage()功能创建具有多个顶级组件的应用程序。

这些功能是使用Bootstrap 2提供的布局功能实现的,这是一个非常流行的HTML / CSS框架(虽然没有假设使用Bootstrap的经验)

边栏布局

侧边栏布局是大多数应用程序的有用起点。此布局为输入提供了侧栏,为输出提供了大的主区域:

1.PNG

这是用于创建此布局的代码:

ui <- fluidPage(

titlePanel("Hello Shiny!"),

sidebarLayout(

sidebarPanel(

  sliderInput("obs", "Number of observations:",  

              min = 1, max = 1000, value = 500)

),

mainPanel(

  plotOutput("distPlot")

)

))

请注意,侧边栏可以位于主区域的左侧(默认)或右侧。例如,要将侧边栏定位到右侧,您将使用以下代码:

sidebarLayout(position = "right",

sidebarPanel(

# Inputs excluded for brevity

),

mainPanel(

# Outputs excluded for brevity

))

网格布局

sidebarLayout() 上面描述的熟悉使用了shiny的低级网格布局功能。行由 fluidRow()函数创建,并包含函数定义的列column()。列宽基于bootstrap 12宽网格系统,因此在fluidRow()容器中最多可添加12个。

为了说明这一点, 下面是一个使用实现侧边栏的布局fluidRow(),column()以及wellPanel()功能:

ui <- fluidPage(

titlePanel("Hello Shiny!"),

fluidRow(

column(4,

  wellPanel(

    sliderInput("obs", "Number of observations:",  

                min = 1, max = 1000, value = 500)

  )       

),

column(8,

  plotOutput("distPlot")

)

))

column()函数的第一个参数是它的宽度(总共12列)。也可以偏移列的位置,以实现对UI元素位置的更精确控制。您可以通过将offset参数添加到函数来向右移动列column()。每个偏移单位将列的左边距增加整列。

UI实例: 其顶部的绘图和底部的三列包含驱动绘图的输入:

2.PNG

实现此UI所需的代码如下:

library(shiny)

library(ggplot2)

dataset <- diamonds

ui <- fluidPage(

title = "Diamonds Explorer",

plotOutput('plot'),

hr(),

fluidRow(

column(3,

  h4("Diamonds Explorer"),

  sliderInput('sampleSize', 'Sample Size',

              min=1, max=nrow(dataset), value=min(1000, nrow(dataset)),

              step=500, round=0),

  br(),

  checkboxInput('jitter', 'Jitter'),

  checkboxInput('smooth', 'Smooth')

),

column(4, offset = 1,

  selectInput('x', 'X', names(dataset)),

  selectInput('y', 'Y', names(dataset), names(dataset)[[2]]),

  selectInput('color', 'Color', c('None', names(dataset)))

),

column(4,

  selectInput('facet_row', 'Facet Row', c(None='.', names(dataset))),

  selectInput('facet_col', 'Facet Column', c(None='.', names(dataset)))

)

)

)

这里有一些重要的事情需要注意:

  1. 输入位于底部,分为三列不同宽度。

  2. 该offset参数用于中心输入列,以提供第一列和第二列之间的自定义间距。

  3. 该页面不包含,titlePanel()因此标题被指定为显式参数fluidPage()。

网格布局可以在a内的任何地方使用fluidPage(),甚至可以相互嵌套。

Tabset

应用程序 通常将其用户界面细分为不连续的部分。这可以使用该tabsetPanel()功能完成。例如:

3.PNG

创建此UI所需的代码是:

ui <- fluidPage(

titlePanel("Tabsets"),

sidebarLayout(

sidebarPanel(

  # Inputs excluded for brevity

),

mainPanel(

  tabsetPanel(

    tabPanel("Plot", plotOutput("plot")),

    tabPanel("Summary", verbatimTextOutput("summary")),

    tabPanel("Table", tableOutput("table"))

  )

)

)

)

选项卡可位于选项卡内容的上方(默认),下方,左侧或右侧。例如,要将选项卡定位在选项卡内容下方,您将使用此代码:

tabsetPanel(position = "below",

tabPanel("Plot", plotOutput("plot")),

tabPanel("Summary", verbatimTextOutput("summary")),

tabPanel("Table", tableOutput("table"))

)

Navlists

当你拥有多个tabPanel时,它navlistPanel()可能是一个很好的选择tabsePanel()。导航列表将各种组件显示为侧边栏列表,而不是使用选项卡。它还支持更长列表的节标题和分隔符。例如(navlistPanel()):

4.PNG

实现此目的所需的代码如下(请注意,tabPanel为空以保持示例整洁,通常它们包含其他UI元素):

ui <- fluidPage(

titlePanel("Application Title"),

navlistPanel(

"Header A",

tabPanel("Component 1"),

tabPanel("Component 2"),

"Header B",

tabPanel("Component 3"),

tabPanel("Component 4"),

"-----",

tabPanel("Component 5")

)

)

你可能感兴趣的:(R语言 shiny布局)