Shiny-HTML

刚学习Shiny的时候，总觉得Shiny这么方便，再也不用去看HTML/CSS/JS了，直到对于Shiny app展示效果越来越高时，发现Shiny一些 工具 的默认参数已经无法满足一些需求了，这时又得返回来依靠HTML的一些用法来实现。。。所以现在觉得Shiny是一个连接R语言用于快速可视化结果的工具，至于做一些网页或者更加美观的网页，还是得会一点HTML相关知识；如果不追求网页交互效果以及美观程度，Shiny的函数的默认参数就足够了。当然如果了解更多的HTML/CSS/JS知识，也就可以设计出更加好的Shiny app

下面是针对shiny中使用HTML来制定更加个性化的UI界面的一些总结

本质上Shiny中的每个函数都是一个HTML代码，如：

> titlePanel("This is a title")
<h2>This is a title</h2>

而Shiny中对于使用HTML的一些标签语法可以用 tags 来调用，如 tags$h2("Header2") ，因此一些的Shiny插件其实是由多个HTML标签所构成的HTML插件

> downloadButton
function (outputId, label = "Download", class = NULL, ...) 
{
    aTag <- tags$a(id = outputId, class = paste("btn btn-default shiny-download-link", 
        class), href = "", target = "_blank", download = NA, 
        icon("download"), label, ...)
}

这样的话，其实我们可以直接用一些HTML标签来代替Shiny函数（只是有时这样的话，布局方面要注意一点，可能会跟Shiny默认的布局有点冲突，导致不太美观，但是简单的代替还是没问题的）

HTML标签使用以及属性就参考w3schools的 HTML 教程

1. 插入图片（图片记得放在shiny文件同一目录的www文件夹中）， tags$img 中可以加各种HTML的标签的属性

   tags$img(src="prm.png", width = "100%", height = "100%")

2. 在R ui.R中不能直接使用HTML标签语法（因为会被直接转化为字符串），可用 HTML 函数来转化为可识别的HTML标签

   HTML("<strong>Raw HTML!</strong>")

3. 对于样式，可以用 tags$style(HTML("...")) 来对一些标签来增加CSS样式语法，如：

   tags$head(tags$style(HTML("...")))

   对一些文字增加样式，比如增加字体、颜色、对齐等等，可以直接在标签里增加style参数，可以看下以下两种的区别

   tags$p("This is just a test!", 
    style = "font-family: 'Source Sans Pro'; color: #0FF; text-align: center"),
   p("This is just a test!")

   对于一些网页上的header增加一个有背景图片的主标题，也是可以用style来设计的，以及增加一点内边距

   h1("APT Tools Web", 
    style = "font-family: 'Source Sans Pro';
       color: #fff; text-align: center;
       background-image: url('texturebg.png');
       padding: 20px")

   还可以增加比较定制化的div边框（内边距、线条以及颜色等），配合style样式

   div(p("This is just a test"), style = "padding: 20px; border: 1px solid #E6E9ED; width: 30%")

   其实shiny中的一些自带函数也是支持style的，比如想对 verbatimTextOutput() 函数（用于shiny输出文字text内容）设定一些背景颜色、文字颜色、对齐排布等等； value 是 verbatimTextOutput() 函数的outputId，类似于class类，然后在style中用 #value 来指定CSS用于对应的id

   tags$style(type='text/css', '#value {background-color: white; color: green; height: 35px; overflow: visible; text-align:left; padding: 8px}'),
   verbatimTextOutput("value")

   也可以修改类似于 fluidRow() 布局函数的样式（其中 tags$head(...) 表示将CSS加到HTML的head标签内）：

   fluidRow(
       class = "myRow1", 
       column(6, div(style = "height:200px; background-color:yellow;", "Topleft")),
       column(6, div(style = "height:100px; background-color:blue;", "Topright"))
   ),
   tags$head(
       tags$style(
         ".myRow1{height:350px; background-color:pink;}"
       )
   )

4. 还有些比较常见的HTML用法：

   • 超链接： tags$a(href="www.rstudio.com", "Click here!")
   • 空白行： br() or tags$br()
   • 水平线： hr() or tags$hr()
   • 内联元素： tag$span() ，多用于指定文字样式
   • 脚本： tags$script(HTML(...)) ，可以用于加入JS脚本

因此可知，shiny开发者们其实是基于shiny的HTML标签的方式来开发新的shiny工具，使其他R使用者以更加方便的方式来搭建shiny交互界面

本文出自于 http://www.bioinfo-scrounger.com 转载请注明出处