2017-01-27 17 views
1

クリック/プレス後、R Shinyのbg色のボタンを変更する必要があります。私は、ホバーのデフォルトの色と色を変更することができますが、クリック後に色を変更する際に問題があります。 ボタンをクリックしないとき - 青、 onホバー - ライトブルー、 クリック後 - グリーン。これを回避しようとしています。ここでRをクリックした後、アクションボタンのbg色を変更します。Shiny

は、私はあなたのCSSコードにいくつかのCSSを追加することによってそれを行うことができた私のコード -

ui <- shinyUI(
dashboardPage (
dashboardHeader(), 
dashboardSidebar(), 
dashboardBody(
    tags$head(tags$style(HTML(" 
          .btn { 
          color:rgb(255,255,255); 
          text-align: left; 
          #border-color:rgb(0,144,197); 
          background-color:rgb(0,144,197);} 

          # #gobutton:active { 
          # background: green; 
          # } 

          .btn:hover{ 
             #border-color:rgb(232,245,251); 
          background-color: rgb(232,245,251);color: rgb(0,144,197);font-weight: bold; 
          } 
          "))), 



      actionButton("gobutton","Go"), 
      bsModal("formExample", "form", "gobutton", size = "small", # Enables Pop up Screen 

      # Different Shiny Widgets 

      textInput("first.name", "First Name", ""), 
      textInput("last.name", "Last Name",""), 
      dateInput('date',label = 'Date of Birth: yyyy-mm-dd',value = ""), 
      sliderInput("age", "Age in Yrs", 0, 100, 25, ticks = FALSE), 
      radioButtons("gender","Gender",choices = list("Male" = "Male", "Female" = "Female"),selected = "Male") 

    ) 
    ))) 

server <- shinyServer(function(input, output) { 
}) 

shinyApp(ui,server) 

答えて

3

です:

ui <- shinyUI(
    dashboardPage (
    dashboardHeader(), 
    dashboardSidebar(), 
    dashboardBody(
     tags$head(tags$style(HTML(" 
           .btn { 
           color:rgb(255,255,255); 
           text-align: left; 
           #border-color:rgb(0,144,197); 
           background-color:rgb(0,144,197);} 

           # #gobutton:active { 
           # background: green; 
           # } 

           .btn:hover{ 
           #border-color:rgb(232,245,251); 
           background-color: rgb(232,245,251);color: rgb(0,144,197);font-weight: bold; 
           } 
           .btn:focus{ 
           background-color:green; 
           } 

           "))), 



     actionButton("gobutton","Go"), 
     bsModal("formExample", "form", "gobutton", size = "small", # Enables Pop up Screen 

       # Different Shiny Widgets 

       textInput("first.name", "First Name", ""), 
       textInput("last.name", "Last Name",""), 
       dateInput('date',label = 'Date of Birth: yyyy-mm-dd',value = ""), 
       sliderInput("age", "Age in Yrs", 0, 100, 25, ticks = FALSE), 
       radioButtons("gender","Gender",choices = list("Male" = "Male", "Female" = "Female"),selected = "Male") 

    ) 
    ))) 

server <- shinyServer(function(input, output) { 
}) 

shinyApp(ui,server) 

上記正常に動作するようです:

enter image description here

私が追加したCSSは:

.btn:focus{ 
    background-color:green; 
} 
+0

もホバー上のボタンにツールチップを追加することをお勧めかもしれ提案コードをありがとうございました。ダッシュボードのどこかをクリックすると、緑の色が消えます。他のボタンがクリックされてから「行く」ボタンが緑色に表示される場合、青色をアクティブにする必要があります。ダッシュボードには複数のボタンがあります。 – string

2

いつでもshinyBSパッケージを使用できます。私は

#rm(list = ls()) 
library(shiny) 
library(shinydashboard) 
library(shinyBS) 
ui <- dashboardPage(
    dashboardHeader(title = 'My Change Button Color'), 
    dashboardSidebar(sidebarMenu()), 
    dashboardBody(
    fluidRow(
     bsButton("button1", label = "Click Me", block = F, style="danger"), 
     bsTooltip(id = "button1", title = "Button 1 Explanation", placement = "right", trigger = "hover") 
    ) 
) 
) 

server <- (function(input, output, session) { 
    observeEvent(input$button1,{                                 
    updateButton(session, "button1",label = "Click Me", block = F, style = "success")                               
    })                                        
}) 

shinyApp(ui, server) 

enter image description here enter image description here

+0

提案されたコードをお寄せいただきありがとうございます。 1つのクイッククエリで、これらの "bsButtons"の色をrgbコードを与えるようにカスタマイズできます。 – string

+0

これらの色はパッケージ内であらかじめ定義されています。デフォルトの 'style'は'(default、primary、success、info、warning、danger)です。詳細はhttps://ebailey78.github.io/shinyBS/index.htmlをご覧ください。 –

関連する問題