Shiny-HTML

开头先推荐一个Shiny达人整理的一些Shiny Tips:
Shiny tips & tricks for improving your apps and solving common problems

刚学习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内容)设定一些背景颜色、文字颜色、对齐排布等等;valueverbatimTextOutput()函数的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交互界面

参考资料:
Shiny HTML Tags Glossary
Customize your UI with HTML

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