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")

)

)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,529评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,015评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,409评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,385评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,387评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,466评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,880评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,528评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,727评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,302评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,873评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2 342

推荐阅读更多精彩内容

  • 华与华为斯利安服务的过程: 一个社会问题就是一个商业机会,一个巨大的社会问题就是一个巨大的商业机会。 伟大的企业就...
    侯小婷的小宇宙阅读 308评论 0 0
  • 孤独的越深,跋涉的路途越远,生命的脚步从未停止,我站在这里从未想过离开。 世界是一个巨大的漩涡,人绝不是其中的一粒...
    怀侠阅读 130评论 0 1
  • 不穿上旗袍不知道,其实旗袍是一把尺子,它能测量你的心里素质和身体发育。有半点偏差可以得到及时提醒,便于即刻调整。...
    小鱼低语阅读 864评论 5 7
  • ——读王维《鹿柴》 今晨这首诗很短,一年级的两个小男生都能熟背。因为这是他们这学期要背的十首诗之一...
    大观学园阅读 863评论 6 6
  • 伊奥尼亚阅读 341评论 0 1