I have the shiny
app below in which I try to color the boxes based on 2 if
conditions but I cannot make it change.
## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
uiOutput("box1"),
uiOutput("box2")
)
)
server <- function(input, output) {
output$box1<-renderUI({
if(nrow(iris)==150){
tags$style(
type = 'text/css',
".box-danger{border-top-style: none; border-left-color: green; border-left-style: solid;}"
)
box(
title = "title",
closable = TRUE,
width = 10,
status = "danger",
solidHeader = F,
collapsible = TRUE,
collapsed = T
)
}
else{
tags$style(
type = 'text/css',
".box-danger{border-top-style: none; border-left-color: red; border-left-style: solid;}"
)
box(
title = "title",
closable = TRUE,
width = 10,
status = "danger",
solidHeader = F,
collapsible = TRUE,
collapsed = T
)
}
})
output$box2<-renderUI({
if(nrow(mtcars)==32){
tags$style(
type = 'text/css',
".box-danger{border-top-style: none; border-left-color: green; border-left-style: solid;}"
)
box(
title = "title",
closable = TRUE,
width = 10,
status = "danger",
solidHeader = F,
collapsible = TRUE,
collapsed = T
)
}
else{
tags$style(
type = 'text/css',
".box-danger{border-top-style: none; border-left-color: red; border-left-style: solid;}"
)
box(
title = "title",
closable = TRUE,
width = 10,
status = "danger",
solidHeader = F,
collapsible = TRUE,
collapsed = T
)
}
})
}
shinyApp(ui, server)
CodePudding user response:
How about this solution. Use the id
argument of the box
and use an #-selector in CSS? THe id
could be used to make the box respond to click-events. But you can just ignore it. By changing the id
depending on the if
condition, you can distinguish the boxes in HTML.
I also moved the CSS to the HTML header and marked the content as HTML()
. See also Change default CSS styling of shinydashboardPlus::descriptionBlock()
## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$head(
tags$style(HTML("
#mybox1Red{border-top-style: none; border-left-color: green; border-left-style: solid;}
#mybox1Green{border-top-style: none; border-left-color: red; border-left-style: solid;}
#mybox2Red{border-top-style: none; border-left-color: green; border-left-style: solid;}
#mybox2Green{border-top-style: none; border-left-color: red; border-left-style: solid;}
"))
),
uiOutput("box1"),
uiOutput("box2")
)
)
server <- function(input, output) {
output$box1<-renderUI({
if(nrow(iris)==150) {
box(
id="mybox1Red",
title = "title",
closable = TRUE,
width = 10,
status = "danger",
solidHeader = F,
collapsible = TRUE,
collapsed = T
)
}
else{
tags$style(
type = 'text/css',
"#mybox1Green{border-top-style: none; border-left-color: red; border-left-style: solid;}"
)
box(
id="mybox1Green",
title = "title",
closable = TRUE,
width = 10,
status = "danger",
solidHeader = F,
collapsible = TRUE,
collapsed = T
)
}
})
output$box2<-renderUI({
if(nrow(mtcars)==32){
tags$style(
type = 'text/css',
"#mybox2Red{border-top-style: none; border-left-color: green; border-left-style: solid;}"
)
box(
id="mybox2Red",
title = "title",
closable = TRUE,
width = 10,
status = "danger",
solidHeader = F,
collapsible = TRUE,
collapsed = T
)
}
else{
tags$style(
type = 'text/css',
"#mybox2Green{border-top-style: none; border-left-color: red; border-left-style: solid;}"
)
box(
id="mybox2Green",
title = "title",
closable = TRUE,
width = 10,
status = "danger",
solidHeader = F,
collapsible = TRUE,
collapsed = T
)
}
})
}
shinyApp(ui, server)