基于不同的选项卡面板显示不同的图像作为闪亮仪表板的标题 [英] Display different image as title of shiny dashboard based on different tabpanels

问题描述

是否可以根据您使用的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

因此，实现此目的的一种方法是在闪亮的反应输出中使用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%")

这篇关于基于不同的选项卡面板显示不同的图像作为闪亮仪表板的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！