tabPanel()
将不同的图像显示为闪亮仪表板的标题。我希望选项卡'Front'
和选项卡'Data'
的图像不同。
# app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(DT)
library(shinyWidgets)
library(shinyjs)
dbHeader <- dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears",
fixed = T,
title = tags$a(href='http://mycompanyishere.com',
tags$img(src='logo.png'))
)
ui <- dashboardPagePlus(
dbHeader,
dashboardSidebar(),
dashboardBody(
useShinyjs(),
tags$hr(),
tabsetPanel(
id ="tabA",
type = "tabs",
tabPanel("Front",icon = icon("accusoft")),
tabPanel("Data", icon = icon("table")
)
)
),
rightsidebar = rightSidebar()
)
server <- function(input, output) {
observe({
if (input$tabA == "Front") {
hide(selector = "body > div.wrapper > header > nav > div:nth-child(4) > ul")
addClass(selector = "body", class = "sidebar-collapse")
removeClass(selector = "body", class = "control-sidebar-open")
} else {
show(selector = "body > div.wrapper > header > nav > div:nth-child(4) > ul")
removeClass(selector = "body", class = "sidebar-collapse")
addClass(selector = "body", class = "control-sidebar-open")
}
})
}
shinyApp(ui = ui, server = server)
因此,实现此目的的一种方法是在闪亮的反应输出中使用shinyjs并修改推荐答案。
为此,我首先"借用"了此函数
# This part is from the link below and will be used to modify CSS in reactive part
# https://stackoverflow.com/questions/31425841/css-for-each-page-in-r-shiny
modifyStyle <- function(selector, ...) {
values <- as.list(substitute(list(...)))[-1L]
parameters <- names(values)
args <- Map(function(p, v) paste0("'", p,"': '", v,"'"), parameters, values)
jsc <- paste0("$('",selector,"').css({", paste(args, collapse = ", "),"});")
shinyjs::runjs(code = jsc)
}
然后使用下面的两个函数(在服务器端部分中的observe()
函数内部),我已经使用css代码修改了反应输出中的css:
# Show one picture.
# NOTE:if using your own picture modify the path inside url().. See the code below.
modifyStyle(".logo img ", "content" = "url(https://dotunroy.files.wordpress.com/2015/05/happy-people.jpg)")
# Show another picture
modifyStyle(".logo img ", "content" = "url(test.png)")
注意为了显示代码工作正常,首先我需要一些图片。因此,我在www目录中保存了一张图片(图片名为test.png(参见上面的代码))。此链接https://dotunroy.files.wordpress.com/2015/05/happy-people.jpg提供另一个链接。
因此,整个代码如下所示(同样,为了显示图像,请将url()内的我的图像路径替换为您自己的路径)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(DT)
library(shinyWidgets)
library(shinyjs)
# Modify the CSS style of a given selector
# This part is from
# https://stackoverflow.com/questions/31425841/css-for-each-page-in-r-shiny
modifyStyle <- function(selector, ...) {
values <- as.list(substitute(list(...)))[-1L]
parameters <- names(values)
args <- Map(function(p, v) paste0("'", p,"': '", v,"'"), parameters, values)
jsc <- paste0("$('",selector,"').css({", paste(args, collapse = ", "),"});")
shinyjs::runjs(code = jsc)
}
dbHeader <- dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears",
fixed = T,
title = tags$a(href='http://mycompanyishere.com',
# Modify the width and the height of the image as you like
tags$img(src='test.png', width ="50%", height = "70%"))
)
ui <- dashboardPagePlus(
dbHeader,
dashboardSidebar(),
dashboardBody(
useShinyjs(),
tags$hr(),
tabsetPanel(
id ="tabA",
type = "tabs",
tabPanel("Front",icon = icon("accusoft")),
tabPanel("Data", icon = icon("table")
)
)
),
rightsidebar = rightSidebar()
)
server <- function(input, output) {
observe({
if (input$tabA == "Front") {
hide(selector = "body > div.wrapper > header > nav > div:nth-child(4) > ul")
addClass(selector = "body", class = "sidebar-collapse")
removeClass(selector = "body", class = "control-sidebar-open")
modifyStyle(".logo img ", "content" = "url(https://dotunroy.files.wordpress.com/2015/05/happy-people.jpg)")
# shinyjs::toggleClass(selector = "head", class = "logo",
# condition = (input$tabA == "Front"))
} else {
show(selector = "body > div.wrapper > header > nav > div:nth-child(4) > ul")
removeClass(selector = "body", class = "sidebar-collapse")
addClass(selector = "body", class = "control-sidebar-open")
modifyStyle(".logo img ", "content" = "url(test.png)")
}
})
}
shinyApp(ui = ui, server = server)
,输出为:
更新
请注意,如果您想修改图片的width
和height
,只需在css中添加这两个参数,即
# Add a custom number of the percentage to width and height parameters
modifyStyle(".logo img ", "content" =
"url(https://dotunroy.files.wordpress.com/2015/05/happy-people.jpg)",
"width" = "100%", "height" = "100%")