KeepNotes blog

Stay hungry, Stay Foolish.

0%

Shiny-HTML

Posted on Edited on In
Symbols count in article: 2.9k Reading time ≈ 3 mins.

开头先推荐一个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内容）设定一些背景颜色、文字颜色、对齐排布等等；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交互界面

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

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

Related Posts