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

您可以使用SQL> with test (col) as 2 (select 'asper,worse' from dual union all 3 select 'tincher,good' from dual union all 4 select 'golder' from dual union all 5 select null from dual union all 6 select 'www,ewe' from dual 7 ) 8 select col, 9 nvl(regexp_substr(col, '\w+', 1, 2), regexp_substr(col, '\w+', 1,1 )) result1, 10 -- 11 nvl(substr(col, instr(col, ',') + 1), col) result2 12 from test 13 where col is not null; COL RESULT1 RESULT2 ------------ -------------------- -------------------- asper,worse worse worse tincher,good good good golder golder golder www,ewe ewe ewe SQL>参数为按钮提供自己的类：

...

然后您将像这样在CSS中访问它们：

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

  )
)

要仅访问fluidrow1中的参数，我将像上面所做的那样，将您的第一个.mybuttons { background-color:#07364E; color: #FFFFFF; font-size:12pt; text-align: center; width:90px }的参数从fluidRow()更改为class = "fluidrow1"。然后，您可以通过以下方式访问它们：

id = "fluidrow1"

如果要在用户界面中设置所有类型的按钮的样式，则还可以使用内置的按钮类：

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

根据上面的输出，您可以看到> actionButton(inputId = "test",label = "Test Label") <button id="test" type="button" class="btn btn-default action-button">Test Label</button>，btn和btn-default都是每次调用action-button时附带的所有类。您还可以修改这些内容（我以actionButton()为例）

action-button

尽管我会谨慎处理，因为您不知道在您不知情的情况下该类可能还会出现在什么地方，而不是使用您完全控制的自己的类（在上面的示例中.action-button { background-color:#07364E; color: #FFFFFF; font-size:12pt; text-align: center; width:90px }）

将fluidRow样式从ui.R移至www / styles.css

1 个答案: