更改R Shiny fileInput中标签文本的大小/间距吗? [英] Change the size /spacing of label text in R Shiny fileInput?

查看:193
本文介绍了更改R Shiny fileInput中标签文本的大小/间距吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用R Shiny应用程序,在其中构建了这样的文件输入功能:

  csvFileInput< -function(name_space,file_name = file,label =输入文件){
ns<-NS(name_space)
#doc此处:https://shiny.rstudio.com/reference /shiny/latest/fileInput.html
fileInput(ns(file_name),标签)
}

现在,我尝试更改此处提供的标签的字体设置(在下图中,它是文件输入)。对于较长的标签,字体似乎太大了,有时显得笨拙。




  • 是否可以更改这些标签中的字体大小?


  • 是否可以添加制表符或换行符之类的空格?






已经有其他 问题,有关总体上有光泽的文本呈现,但是我不确定这些标签是否的实现方式类似,我也不了解网络脚本编写,因此非常感谢您的帮助。

解决方案

本文巧妙地总结了使用CSS设置Shiny样式的三种方法。如果最终要样式化多个元素,通常最好通过样式表(即实际的.css文件)添加CSS,该样式表需要在Shiny中放置在名为 www的子目录中,该子目录又是在您的应用目录中。



如果仅对一个元素进行样式设置( element表示从函数输出的UI),并且希望将样式应用于整个元素,则可以将元素包装在 div 标记中,并使用 style 属性,如下所示:

  div(
fileInput( file1,选择CSV文件,
accept = c(
text / csv ,
文本/逗号分隔值,文本/纯文本,
.csv)
),style = font-size:80%; font-family:Arial;

如果您只想样式化元素的一个组成部分,例如如前所述,那么您需要使用浏览器中的开发人员工具来确定可以为样式指定的HTML。对于fileInput标签,实际的< label> HTML标签是我们的目标。如果您不想使用样式表,则可以通过Shiny文章中介绍的第三种方法(通过标签函数)添加必要的CSS。您可以将以下代码添加到UI中(在 fluidPage 的顶部)以更改字体并在标签下方添加填充:

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


I am working on an R Shiny app, where I have constructed a file input function like so:

  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)
  }

Now I am trying to change the font settings of the label supplied here (in the image below, it is "File in"). The font seems too large for longer labels and it sometimes looks clunky.

  • Is there a way to change the font size in these labels?

  • Is there a way to add whitespace such as tabs or linebreaks?

The docs simply say that this label is

Display label for the control, or NULL for no label.

There have been other questions on SO regarding Shiny text rendering in general, but I am not sure that those labels are implemented similarly and I have no knowledge of web scripting, so any help is much appreciated.

解决方案

This article pretty neatly summarizes the three ways you can style Shiny with CSS. If you end up styling more than a few elements, it's often best to add the CSS through a style sheet (i.e. an actual .css file), which in Shiny needs to be placed in a subdirectory named "www", which in turn is in your app directory.

If you're styling just one element ("element" meaning a UI output from a function), and you want the styling to apply to the entire element, you can wrap the element in a div tag and use the style attribute like so:

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

If you only want to style one component of the element, as you've described, then you need to use the developer tools in your browser to figure out what HTML you can target for your styling. In the case of a fileInput label, an actual <label> HTML tag is our target. If you'd rather avoid needing a stylesheet, then you can add the necessary CSS through the third approach described in the Shiny article, which is through the tags function. You can add the following code to your UI (right at the top of fluidPage) to change the font and add padding below the label:

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

这篇关于更改R Shiny fileInput中标签文本的大小/间距吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆