使用 HTML 的 R 闪亮输出的属性

【问题标题】：Attributes of R shiny outputs using HTML使用 HTML 的 R 闪亮输出的属性
【发布时间】：2018-01-30 15:07:40
【问题描述】：

给定的脚本在 r shiny 中创建了一个操作按钮和一个滑块。如果我希望在 html 脚本中为 {{ button }} 提供某些属性，例如位置、左侧边距、高度和宽度，请帮助我。

<!-- template.html -->
<html>
<head>
{{ headContent() }}
</head>
<body>
<div>
{{ button }}
{{ slider }}
</div>
</body>
</html>

## ui.R ##
htmlTemplate("template.html",
button = actionButton("action", "Action"),
slider = sliderInput("x", "X", 1, 100, 50)
)

【问题讨论】：

标签： html css r shiny dashboard

【解决方案1】：

可重现的示例，请注意，可以使用#action 选择器直接设置动作按钮的样式，但是滑块输入具有容器，因此滑块的定位应该在容器级别完成，而不能通过选择 id 来完成。据我所知，css 选择器没有相当于 jquery :has()

library(shiny)
shinyApp(
  ui <- fluidPage(
    fluidRow(actionButton("action", "Action"),sliderInput("x", "X", 1, 100, 50)),
    tags$head(
      tags$style('#action { margin:3px;border:2px solid green;padding 20px;}
                 .slider-custom-format { margin:3px;border:1px solid red;}
                 .slider-custom-format .irs-bar,.slider-custom-format .irs-bar-edge{background:red;}'),
      tags$script('$(function(){
                  $(".form-group.shiny-input-container:has(#x)").addClass("slider-custom-format")
                  })')
)
  ),
  server <- function(input, output) {})

【讨论】：