【发布时间】：2017-02-23 17:19:35
【问题描述】：
使用以下结构的 ShinyApp 时：
.
├── server.R
├── ui.R
└── www
└── custom.css
我想使用custom.css，它通过以下方式链接到应用程序：
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
),
通过将不同的类分配给单独的小部件。
文件
ui.R
ui.R 定义了一些小部件，我想要三个滑块，两个具有不同的类：
library(shiny)
shinyUI(fluidPage(
# Link CSS file
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
),
# Application title
titlePanel("Old Faithful Geyser Data"),
# Sidebar with a slider input for number of bins
sidebarLayout(sidebarPanel(
sliderInput(
"bins",
"Number of bins:",
min = 1,
max = 50,
value = 30
),
# Class call to odd class
sliderInput(
"binsA",
"Number of bins (someOddClass):",
min = 1,
max = 50,
value = 30
),
# Class call to even more odd class
sliderInput(
"binsB",
"Number of bins (someEvenMoreOddClass):",
min = 1,
max = 50,
value = 30
)
),
# Show a plot of the generated distribution
mainPanel(plotOutput("distPlot"))
)))
custom.css
custom.css 定义了以下类：
.someOddClass {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 23px;
font-weight: bold;
color: #336699;
}
.someEvenMoreOddClass {
background: #fff;
padding: 10px;
}
server.R
server.R 在本示例的上下文中没有做任何相关的事情：
library(shiny)
shinyServer(function(input, output) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
})
附注
工作解决方案源自可用的讨论here，建议在小部件调用中包含style = ...。我对这种方法不感兴趣，因为我想使用 custom.css 文件（从更广泛的工作流程的角度来看，因为文件被更广泛地使用，这很有意义）。
生成的来源：
<div class="form-group shiny-input-container">
<label class="control-label" for="binsA">Number of bins (someOddClass):</label>
<input class="js-range-slider" id="binsA" data-min="1" data-max="50" data-from="30" data-step="1" data-grid="true" data-grid-num="9.8" data-grid-snap="false" data-keyboard="true" data-keyboard-step="2.04081632653061" data-drag-interval="true" data-data-type="number" data-prettify-separator=","/>
</div>
<div class="form-group shiny-input-container">
<label class="control-label" for="binsB">Number of bins (someEvenMoreOddClass):</label>
<input class="js-range-slider" id="binsB" data-min="1" data-max="50" data-from="30" data-step="1" data-grid="true" data-grid-num="9.8" data-grid-snap="false" data-keyboard="true" data-keyboard-step="2.04081632653061" data-drag-interval="true" data-data-type="number" data-prettify-separator=","/>
</div>
显示滑块的类的存在：
<input class="js-range-slider" id="binsB" ...
在实践中，我想扩展它并注入另一个对custom.css 中定义的类的调用。自然是把class = ...介绍给inputSlider()：
value = 30,
class = "someOddClass"
(...)
),
将导致错误，因为该参数在 inputSlider() 的上下文中没有意义：
Error : unused argument (class = "someOddClass")
如何更改 sliderInput() 调用，以便创建引用所需自定义类的标签？
【问题讨论】：
-
你可以通过id来做吗？还是每个 CSS 类有很多滑块？如果您可以通过
id完成，在您的custom.css中，您可以使用#binsA而不是.someOddClass，例如。不过，如果您有很多滑块，那就不太理想了。 -
@NicE 感谢您的关注。 ID 可能是一个后备选项，但我正在使用一些小部件，例如bookmark button，其中 id 不常用，但允许。理想情况下，我想找到一种方法，可以在给定元素上使用或不使用 ID 调用特定类。此外，我想保持
custom.css可能不变，但如果无法在任何元素上调用特定类，则必须执行您建议的解决方案。 -
好的，那么您可以执行
tags$div(class="someEvenMoreOddClass",sliderInput(...))之类的操作，将输入包装在您选择的类中的 div 中。最灵活的选择可能是使用index.html并将类设置在您想要的任何位置，例如here -
@NicE 谢谢这可以作为一个解决方案。
标签： css r css-selectors shiny