Shinydashboard - 根据所选选项卡更改背景

2023-12-04

我正在使用 Shinydashboard 包创建一个仪表板,我需要根据所选选项卡更改背景颜色。我已经尝试过以下代码,但它没有按预期工作。

library(shiny)
library(shinydashboard)
library(dplyr)

ui <- dashboardPage(dashboardHeader(dropdownMenuOutput("notificationMenu")), 
                    dashboardSidebar(sidebarMenu(menuItem("Page 1", tabName = "page1"),
                                                 menuItem("Page 2", tabName = "page2"))),
                    dashboardBody(tags$style(".content {background-color: #f7f7f7;
            .content-wrapper .tab-pane .shiny-tab-page1 {background-color: #000000;
            }
            "),
                                  tabItems(
                      tabItem(tabName = "page1", h4("This is Page 1")),
                      tabItem(tabName = "page2", 
                              textInput("text", "Enter News:", "New News."),
                              actionButton("save", "Save")))))

server <- function(input, output, session){
  raw_news <- reactiveValues()

  # Intial Header News: 1 Message from Admin
  raw_news$news <- data_frame(from = "Admin", text = "this is a message")

  # The notifications in header
  output$notificationMenu <- renderMenu({
    raw_news <- raw_news$news

    dropdownMenu(
      messageItem(raw_news$from[1], raw_news$text[1])
    )
  })

  # save a new notification
  observeEvent(input$save, {
    raw_news$news <- data.frame(from = "User", text = input$text)
  }) 
}

shinyApp(ui = ui, server = server)

任何帮助将不胜感激。


一种可能的解决方案是根据所选选项卡呈现样式标签。请注意,为此,侧边栏菜单需要一个id。下面是一个工作示例,希望对您有所帮助!


enter image description here

library(shiny)
library(shinydashboard)
ui <- dashboardPage(dashboardHeader(dropdownMenuOutput("notificationMenu")), 
                    dashboardSidebar(sidebarMenu(id='sidebar',
                                                 menuItem("Page 1", tabName = "page1"),
                                                 menuItem("Page 2", tabName = "page2")),
                                     uiOutput('style_tag')),
                    dashboardBody(
                      tabItems(
                        tabItem(tabName = "page1", h4("Blue!",style='color:white')),
                        tabItem(tabName = "page2", h4('Red!'))
                      ))
)

server <- function(input, output, session){

  output$style_tag <- renderUI({
    if(input$sidebar=='page1')
      return(tags$head(tags$style(HTML('.content-wrapper {background-color:blue;}'))))

    if(input$sidebar=='page2')
      return(tags$head(tags$style(HTML('.content-wrapper {background-color:red;}'))))
  })
}

shinyApp(ui = ui, server = server)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Shinydashboard - 根据所选选项卡更改背景 的相关文章

  • 不透明度如何影响元素顺序?

    我发现 CSS 有一个非常奇怪的行为opacity与浮动元素相结合 考虑以下 HTML div div Right button div div div Overlay div 最后div将覆盖前两个浮动的 删除不透明度会将最新的 div
  • Bootstrap 响应式图像缩放

    Using Twitter Bootstrap我意识到默认情况下它会响应式地缩放图像 这很棒 但并不总是完美的 比如说我有一个500x300桌面上的图像 然后它会针对移动设备调整大小 该图像将非常小而且不是很高 会丢失图像的大部分细节部分
  • 获得各州的边界

    编辑7 经过相当多的帮助后 我已经能够得到一张接近我需要的结果的地图 但我仍然需要在地图上显示州边界 但我无法弄清楚 为了制作一个合适的可重现示例 我需要链接到数据集 因为输出太大 为了使事情变得简单 我只对三个状态进行子集化 但边界线不显
  • 页脚没有停留在底部

    这似乎是有史以来最令人困惑的问题 至少对我来说是这样 知道这个页面 除了标题之外 都已损坏 我复制了 HTML 并尝试小心地删除 WordPress 相关的爵士乐 以便您获得该页面的 html JsBin直播页面 http jsbin co
  • R 中的多面点阵图,例如线框:如何删除条带并添加 1 行字幕

    我使用这种功能 来自iris数据集 model test lt lm Sepal Length Petal Length Sepal Width Petal Width Species 2 data iris gg lt expand gr
  • 在R中重新排序字母数字年龄组

    假设这就是 R 给我的 df1 data frame grp c lt 2 2 5 21 26 27 32 6 10 val rep 0 5 grp val 1 lt 2 0 2 2 5 0 3 21 26 0 4 27 32 0 5 6
  • 在 Rdata 中保存矩阵并更新 Rdata 文件

    我有一个矩阵 mat lt matrix data 1 30 ncol 10 nrow 3 我想将其保存到 Rdata save mat file m Rdata 然后加载回来 m lt load m Rdata 然后看看它的内容 m 1
  • Bootstrap Html 列宽度太大

    var parentDiv document getElementById cc var statementDiv document createElement div var statementName document createEl
  • 如何编辑 R 函数的源代码?

    我正在与earlywarnings包 并想编辑其中编写的函数之一qda ews功能 我可以fix 但我想编辑的功能由于某种原因在我使用时没有列出fix 该函数称为generic RShiny 这是 github 的链接 https gith
  • 如何在对角线元素上创建 CSS 边框

    这是一个例子 http jsfiddle net 52c7t http jsfiddle net 52c7t Simply 我试图让 div 位于右侧 并具有像左侧 div 一样的边框 我希望边框位于右侧 div 的左侧 我尝试了一百万种不
  • 如何让html中的文字出现在滚动条上

    您好 我希望当我滚动经过某个文本或滚动到该文本所在的位置时显示该文本 出现时的效果应该有点像网站顶部第一个效果http namanyayg com http namanyayg com 我希望用最少的代码使用纯 CSS 和 JS 来实现效果
  • CSS3变换:翻译最大值?

    我创建了一个实验无限滚动 Pi 的前十亿位 https daniellamb com experiments infinite pi 寻找 创建一个具有大量数据集的高性能滚动解决方案 我开始测试iScroll http iscrolljs
  • 显示地址栏时的 100vh 高度 - Chrome Mobile

    I came across this problem a few times and was wondering if there was a solution to this problem My problem occurs on th
  • 四列布局,无需媒体查询即可转换为单列

    我正在尝试创建一个四列布局 其中每列随着窗口的大小而增大和缩小 但每列都有最小宽度 当窗口太小而无法将所有四列放入单行时 它会转换到单个列 每个部分占据整个宽度 我无法使用 flex box 或 CSS 网格来做到这一点 我想在没有媒体查询
  • 更改导航栏悬停时 div 的背景图像

    我正在开发一个项目 我对 Javascript 很陌生 所以我想知道是否有 Jquery 代码或只是一个关于如何使背景图像在导航菜单悬停时更改的过程 例如将鼠标悬停在链接一上会将 div 的背景图像更改为图像 1 将鼠标悬停在链接二上会将
  • 如何为ggplot中的每个方面行添加y轴标题?

    我正在做一个散点图facet grid 像那样 library ggplot2 ggplot df aes x y geom point facet grid group1 group2 我想要 y 轴标题y像这样位于每一行的中间 绘制解决
  • 如何在R中生成多个矩阵

    我在 R 中得到了两个值列表 daily max car List 1 21 21 22 22 22 22 21 daily 0 8 List 2 16 17 17 17 18 17 17 尝试在 R Studio 中编写一个 For 循环
  • 在R中读写csv.gz文件

    有非常similar https stackoverflow com questions 9548630 read gzipped csv directly from a url in r关于这个主题的问题 但非在 R 下非常精确地处理这个
  • ggplot2条形图:按数据顺序填充

    给出这样的数据框 sam lt data table title c rep Cat 8 rep Dog 4 fcat c A B C B B C C B C B B C fnum c seq 8 1 seq 4 1 labeltext c
  • 是否可以通过样式表进行跨域攻击?

    我需要为我的 Web 应用程序的用户创建的网页实现灵活的样式系统 理想情况下 我希望允许他们使用 CSS 正在链接到用户定义的 url 处的样式表Bad Idea Why 可以安全地做到这一点吗 您对此有何看法 我试图避免构建样式 编辑器

随机推荐