css - 将 fluidRow 样式从 ui.R 移动到 www/styles.css

Question

我有 5 个按钮，我想使用 css 一次控制所有这些按钮，而不必调用 #button1、#button2、#button3...

当我在 css 文件中进行更改时，有没有像“主”类一样定义所有按钮都依赖的类。

或者，如果我只想一次控制fluidrow1或fluidrow2的按钮，我该怎么办？

请参阅下面的代码:

ui.R

shinyUI(fluidPage(theme = "shiny.css",
              tags$head(
                tags$link(rel = "stylesheet", type = "text/css", href = "shiny.css")
              ),

  fluidRow(class = "fluidrow1",
           column(6, actionButton(inputId = "button1", label = "Button 1")),
           column(6, actionButton(inputId = "button2", label = "Button 2"))
           ),
  fluidRow(id = "fluidrow2",
           column(6, actionButton(inputId = "button3", label = "Button 3")),
           column(6, actionButton(inputId = "button4", label = "Button 4"))
           ),
  actionButton(inputId = "button5", label = "Button 5")

  )
)

shiny.css(位于“www”文件夹中，现在只控制button1)

#button1 {
  background-color:#07364E;
  color: #FFFFFF;
  font-size:12pt;
  text-align: center;
  width:90px
}

Answer 1

您可以使用 ... 参数为您的按钮赋予它们自己的类:

shinyUI(fluidPage(theme = "shiny.css",
              tags$head(
                tags$link(rel = "stylesheet", type = "text/css", href = "shiny.css")
              ),

  fluidRow(id = "fluidrow1",
           column(6, actionButton(inputId = "button1", label = "Button 1", class = "mybuttons")),
           column(6, actionButton(inputId = "button2", label = "Button 2", class = "mybuttons"))
           ),
  fluidRow(id = "fluidrow2",
           column(6, actionButton(inputId = "button3", label = "Button 3", class = "mybuttons")),
           column(6, actionButton(inputId = "button4", label = "Button 4", class = "mybuttons"))
           ),
  actionButton(inputId = "button5", label = "Button 5", class = "mybuttons")

  )
)

然后你可以像这样在 css 中访问它们:

.mybuttons {
  background-color:#07364E;
  color: #FFFFFF;
  font-size:12pt;
  text-align: center;
  width:90px
}

要访问仅在 fluidrow1 中的那些，我首先将第一个 fluidRow() 的参数从 class = "fluidrow1" 更改为 id = "fluidrow1" 正如我在上面所做的那样。然后你可以通过以下方式访问它们:

#fluidrow1 .mybuttons {
  background-color:#07364E;
  color: #FFFFFF;
  font-size:12pt;
  text-align: center;
  width:90px
}

如果您想在 UI 中设置任何类型的所有按钮的样式，您还可以使用按钮的内置类:

> actionButton(inputId = "test",label = "Test Label")
<button id="test" type="button" class="btn btn-default action-button">Test Label</button>

根据上面的输出你可以看到btn, btn-default, and action-button 都是自带的类调用 actionButton()。你也可以修改这些(我选择了 action-button 作为例子):

.action-button {
  background-color:#07364E;
  color: #FFFFFF;
  font-size:12pt;
  text-align: center;
  width:90px
}

尽管我会对此小心，因为你不知道这个类可能会在你不知情的情况下出现在哪里，而不是使用你自己的完全控制的类(.mybuttons in上面的例子)。