「R shiny 基础」如何进行网页布局

生物_医药_科研 2019-02-03

展开全文

在第一篇「R shiny 基础」初识Shiny ，我们了解了Shiny应用主要分为两个部分，UI对象和 server函数，这一篇将会介绍如何进行网页布局。

准备

在开始之前，你需要创建一个文件夹，其中有一个 app.R文件，复制如下的内容到 app.R中

library(shiny)
# 定义UI
ui <> fluidPage(
)
# 定义服务端
server <> function(input, output){
}
# 运行app
shinyApp(ui = ui, server = server)

基本布局(Layout)

当你打开任何一个网页，每个网页的不同元素的摆放方式就是布局，例如我的简书主页

我们的目标是快速的构建一个凑合用的网页应用，而如果从头搭建，那么你需要学一堆HTML语法和CSS样式，基本上就把我们劝退了。好在Shiny提供了一系列高级函数，让我们“暂时”不用考虑底层的HTML和CSS。

HTML元素描述的是内容是什么，CSS用于描述内容应该怎么样。

先学初学者必须掌握的布局三板斧， fluidPage, titlePanel和 sidebarLayout,

fluidPage: 它的作用和其命名一致，就是创建一个流动布局的页面。
titlePanel: 标题栏
sidebarLayout: 常用的边栏布局，接受如下两个函数作为输入
sidebarPanel: 边栏
mainPanel: 主体部分

ui <> fluidPage(
  titlePanel('title Panel'),
  sidebarLayout(
    sidebarPanel('sidebar'),
    mainPanel('main panler')

  )

效果如下:

titlePanel和 sidebarLaytou创建了我们Shiny应用的基本布局，对于我们初学者基本就够用了。在我们有一定基础后，我们可以尝试用 fluidRow和 Column手动搭建布局。

虽然结果不是特别好看，但请牢记当我们学习一个新事物的时候，不要想着完美，而是追求完成。只有完成了，你才能有资格谈完美。

HTML内容

在搭建好基本布局的前提下，我们可以在 *Panel函数中填充更多内容。比方说，出现在 siderbarPanel中的'siderbar'，就是我们加入的文字内容。

从最终的HTML角度来看，sidebarLayout中是将网页分隔成4:8的两个部分，sidebarPanel是4, mainPanel是8。且sidebarPanel输入的内容是都在HTML的 form 层级下

为了增加更多高级的内容，我们可以Shiny的HTML 标签函数(tag)，等价于HTML5的标签(tag)。

shiny 函数	等价的HTML5 标签	结果
p		段落
h1		第一级标题
h2		第二级标题
h3		第三级标题
h4		第四级标题
h5		第五级标题r
h6		第六级标题
a		超链接
br		空白行
div		分隔文本
span		行内分割
pre		等宽文本
code		代码
img		图片
strong		加粗
em		强调
HTML		原生HTML代码

写个代码练习下

ui <> fluidPage(
titlePanel('title Panel'),
sidebarLayout(
sidebarPanel(
tags$hgroup(h1('Side Bar'), h2('Panel'))
),
mainPanel(
HTML('
You can add content to your Shiny app by placing it inside a *Panel function. For example, the apps above display a character string in each of their panels. The words “sidebar panel” appear in the sidebar panel, because we added the string to the sidebarPanel function, e.g. sidebarPanel(\'sidebar panel\'). The same is true for the text in the title panel and the main panel.
'),
div()
)
)
)

格式化样式

上面只用了HTML的元素，如果我们希望标题能够居中，改变字体和颜色，那么就需要对HTML中元素的属性进行修改。

ui <> fluidPage(
  titlePanel('title Panel'),
  sidebarLayout(
    sidebarPanel(
      h1('Side Bar Panel')

    ),
    mainPanel(
      h1('First Header', align='center',
        style ='font-family: 'times'; font-size: 32pt '),
      h2('Second Header', align='center',
         stype = 'font-family: 'arial'; font-size: 14pt'),
      div(),
      p('I fill blue', style = 'color:blue')
    )
  )
)

关于元素的属性，可以在w3schools学习

图片和超链接

除了简单的文本以外，我们还可以在网页中增加图片，为文本增加超链接。图片的内容要放和 app.R同一级的 www文件夹下

ui <> fluidPage(
titlePanel('title Panel'),
sidebarLayout(
sidebarPanel(
h1('Side Bar Panel')
),
mainPanel(
h1('Hello Shiny', align='center',
style ='font-family: 'times'; font-size: 32pt '),
div(),
p('This images was download from', a(href='https://www.jianshu.com/p/e2495bbc7bd1', 'here' )),
img(src = '2013053-4dd190b5c709b535.png')
)
)