Shiny-HTML

栏目: Html · 发布时间: 5年前

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

开头先推荐一个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交互界面

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

疯长

疯长

[美]肖恩· 阿美拉蒂 / 中信出版集团 / 2018-10 / 45

实现财务回报以及扩大影响力是企业家长期关注和讨论的问题。 为什么有些公司实现了10倍的投资回报,而其他的则勉力支撑?产品类似的公司,为什么有的家喻户晓,有的默默无闻直至退出市场…… 为了了解真相,作者阿美拉蒂在这本书中精选10组对照公司,比如,同为社交平通的Facebook(脸谱网)和Friendster(交友网),同为快餐领域先驱的麦当劳和白色城堡,再比如都在开发电动汽车市场的特斯拉......一起来看看 《疯长》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器

html转js在线工具
html转js在线工具

html转js在线工具