更改R Shiny fileInput中标签文本的大小/间距?

时间:2017-08-24 23:51:47

标签: css r shiny

我正在开发一个R Shiny应用程序,我在其中构建了一个文件输入函数,如下所示:

  csvFileInput <- function(name_space, file_name="file", label = "Input file") {
    ns <- NS(name_space)
    # doc here: https://shiny.rstudio.com/reference/shiny/latest/fileInput.html
    fileInput(ns(file_name), label)
  }

现在我正在尝试更改此处提供的label的字体设置(在下图中,它是&#34;文件在&#34;)。对于较长的标签,字体看起来太大了,有时看起来很笨重。

  • 有没有办法更改这些标签中的字体大小?

  • 有没有办法添加标签或换行符等空格?

docs只是说这label

  

显示控件的标签,如果没有标签,则为NULL。

R Shiny Screenshot

关于Shiny文本呈现一般都有other questions,但我不确定这些标签是否实现类似,我不知道网页脚本,所以任何帮助都很多赞赏。

1 个答案:

答案 0 :(得分:5)

This article非常巧妙地总结了使用CSS设置Shiny样式的三种方法。如果您最终设置了多个元素的样式,通常最好通过样式表(即实际的.css文件)添加CSS,在Shiny中需要将其放在名为&#34的子目录中; www&#34;,反过来又在你的app目录中。

如果您只为一个元素设置样式(&#34;元素&#34;表示函数的UI输出),并且您希望样式应用于整个元素,则可以将元素包装在一个元素中div标记并使用style属性,如下所示:

div(
   fileInput("file1", "Choose CSV File",
               accept = c(
               "text/csv",
               "text/comma-separated-values,text/plain",
               ".csv")
   ), style="font-size:80%; font-family:Arial;"
)

如果您只想设置元素的一个组件,正如您所描述的那样,那么您需要使用浏览器中的开发人员工具来确定可以为您的样式定位的HTML。对于fileInput标签,实际的<label> HTML标记是我们的目标。如果你宁愿避免使用样式表,那么你可以通过Shiny文章中描述的第三种方法添加必要的CSS,这是通过tags函数。您可以将以下代码添加到UI(位于fluidPage顶部)以更改字体并在标签下方添加填充:

tags$head(
  tags$style(HTML(
    "label { font-size:80%; font-family:Times New Roman; margin-bottom: 
    20px; }"
  ))
)