简体   繁体   中英

Attributes of R shiny outputs using HTML

The given script creates an action button and a slider in r shiny. If I wish to give certain attributes to {{ button }} in html script like position, margin from left, height and width, please help me with this.

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

reproducible example, note that action button can be styled directly by using #action selector however slider input has container therefore positioning of the slider as such should be done at container level and cannot be done by selecting id. As far as i know css selector doesnt have equivalent of 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) {})

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM