「R shiny 基础」如何进行网页布局
在第一篇「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 层级下
HTML源代码
为了增加更多高级的内容，我们可以Shiny的HTML 标签函数(tag)，等价于HTML5的标签(tag)。
| shiny 函数 | 等价的HTML5 标签 | 结果 |
|---|---|---|
| p | <p> | 段落 |
| h1 | <h1> | 第一级标题 |
| h2 | <h2> | 第二级标题 |
| h3 | <h3> | 第三级标题 |
| h4 | <h4> | 第四级标题 |
| h5 | <h5> | 第五级标题r |
| h6 | <h6> | 第六级标题 |
| a | <a> | 超链接 |
| br | 空白行 | |
| div | <div> | 分隔文本 |
| span | <span> | 行内分割 |
| pre | <pre> | 等宽文本 |
| code | <code> | 代码 |
| img | <img> | 图片 |
| strong | <strong> | 加粗 |
| em | <em> | 强调 |
| HTML | 原生HTML代码 |
写个代码练习下
ui <- fluidPage(
titlePanel("title Panel"),
sidebarLayout(
sidebarPanel(
tags$hgroup(h1("Side Bar"), h2("Panel"))
),
mainPanel(
HTML("<p>You can add content to your Shiny app by placing it inside a <code>*Panel</code> 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 <code>sidebarPanel</code> function, e.g. <code>sidebarPanel(\"sidebar panel\")</code>. The same is true for the text in the title panel and the main panel.</p>"),
div()
)
)
)
预览页面
对应的HTML
格式化样式
上面只用了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")
)
)
)
网页效果
对应的HTML
关于元素的属性，可以在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")
)
)
效果如下
Shiny支持的Tags在如下两个链接中有介绍
- http://shiny.rstudio.com/articles/html-tags.html
- http://shiny.rstudio.com/articles/tag-glossary.html
小练习
请还原出如下的网页布局
小练习
其中Rstuio的图片下载地址为http://shiny.rstudio.com/tutorial/written-tutorial/lesson2/www/rstudio.png
复习
经过这一篇的学习，我们现在能完成如下内容
- 使用
fluidPage,titlePanel和sidebarLayout创建用户界面 - 使用Shiny的tag函数构建HTML元素
- 为每个tag函数设置HTML属性
- 通过往
titlePanel,sidebarPanel或mainPanel传入元素填充网页 - 在子布局中使用
,分隔多个元素 - 增加
www文件夹下的图片
到目前为止，我们只使用了HTML的基本元素构建用户界面，下一节将会学习在网页中增加一些小工具，例如下拉栏。
参考
传送门
Shiny基础教程:
