仅在闪亮仪表板的特定 tabItem 上应用 css 格式

如何解决仅在闪亮仪表板的特定 tabItem 上应用 css 格式

我在下面有一个闪亮的应用程序，我只想在闪亮的仪表板的特定 tabItem 上应用 css 格式，但它同时应用于两者。如何指定它仅在 1 日应用？

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),dashboardSidebar(menuItem("Welcome",tabName = "tab1",icon = icon("house")),menuItem("Information",tabName = "tab2",icon = icon("table"))),dashboardBody(
    tabItems(
      tabItem("tab1",tags$head(tags$style(HTML('
      
  body{
  font-size: 12pt;
  font-family: "Montserrat Light",sans-serif;
  text-align: justify;
  background-color: linen;
}
  H1.title{
  font-size: 44pt;
  font-family: "Chronicle Display Light",Times,serif;
  text-align: right;
  background-color: linen;
}
  H1{
  font-size: 44pt;
  font-family: "Chronicle Display Light",serif;
  text-align: right;
  background-color: linen;
}
  H2{
  font-size: 16pt;
  font-weight: bold;
  font-family: "Chronicle Display Light",serif;
  text-align: left;
  background-color: linen;
}

    '))),fluidRow(column(3,h3("Concent"))),tags$hr(),h5(strong("Investigators")))),fluidRow(column(9,"The investigators of this project are:")),"Dr Adam Hodgkins","(",tags$a (href="[e-mail]","[e-mail]"),")")),"Dr Hodgkins can be contacted by telephone on 0414 296 699. ")),h5(strong("Consent")))),fluidRow(column(12,"The practice owners have been given information about the research project titled “Life,death and statins: Survival analysis of elderly general practice patients in relation to statin prescriptions.”")),"The practice owners have been provided the opportunity to discuss the research with the investigators who are conducting this research as part of the University of Wollongong. ")),"The practice owners have been advised of any possible risks or burdens associated with this research and have had the opportunity to ask the investigators any questions they may have about the research and my participation.


")),"I understand our practice’s participation is voluntary,our practice is free to choose not to participate and is free to withdraw from the research at any time. Our practice’s choice to not participate or to withdraw consent will not affect its relationship with the researchers or the University of Wollongong. 


"))
              ),tabItem("tab2","The practice owners have been advised of any possible risks or burdens associated with this research and have had the opportunity to ask the investigators any questions they may have about the research and my participation.


")))
    )
    
  )
)

server <- function(input,output) { }

shinyApp(ui,server)

解决方法

将 tab1 的内容用 div() 包裹在 id 中，并且 CSS 应该只为该 id 定义。我在下面的代码中将 mytab 定义为 id。

css <- "
  #mytab body{
  font-size: 12pt;
  text-align: justify;
  background-color: linen;
}
  #mytab H1.title{
  font-size: 44pt;
  text-align: right;
  background-color: linen;
}
  #mytab H1{
  font-size: 44pt;
  text-align: right;
  background-color: linen;
}
  #mytab H2{
  font-size: 16pt;
  font-weight: bold;
  text-align: left;
  background-color: linen;
}
"
  
ui <- dashboardPage(
  dashboardHeader(),dashboardSidebar(sidebarMenu(menuItem("Welcome",tabName = "tab1",icon = icon("home")),menuItem("Information",tabName = "tab2",icon = icon("table")))),dashboardBody(
    tags$style(css),tabItems(
      tabItem(tabName="tab1",div( id="mytab",fluidRow(column(3,h1("Consent"))),tags$hr(),h2(strong("Investigators")))),fluidRow(column(9,"The investigators of this project are:")),"Dr Adam Hodgkins","(",tags$a (href="[e-mail]","[e-mail]"),")")),"Dr Hodgkins can be contacted by telephone on 0414 296 699. ")),h1(strong("Consent")))),fluidRow(column(12,"The practice owners have been given information about the research project titled “Life,death and statins: Survival analysis of elderly general practice patients in relation to statin prescriptions.”")),"The practice owners have been provided the opportunity to discuss the research with the investigators who are conducting this research as part of the University of Wollongong. ")),"The practice owners have been advised of any possible risks or burdens associated with this research and have had the opportunity to ask the investigators any questions they may have about the research and my participation.


")),"I understand our practice’s participation is voluntary,our practice is free to choose not to participate and is free to withdraw from the research at any time. Our practice’s choice to not participate or to withdraw consent will not affect its relationship with the researchers or the University of Wollongong. 


"))
      )),tabItem(tabName = "tab2",h3("Concent"))),h5(strong("Investigators")))),h5(strong("Consent")))),"The practice owners have been advised of any possible risks or burdens associated with this research and have had the opportunity to ask the investigators any questions they may have about the research and my participation.


")))
    )
    
  )
)

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

shinyApp(ui,server)

,

尽量减少您的问题代码。您的 sidebarMenu 周围还缺少一个 menuItem。这里使用您的代码的简化版本来强调要做什么。

首先将您的样式标签移动到仪表板正文。即使你把它放在 tabItem 中，它也总是会出现在你的页面的头部！

要将样式限制为特定的 tabItem，请在样式表中的选择器前面加上 #shiny-tab-TABNAME（将 TABNAME 替换为您的标签名）

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),dashboardSidebar(
    sidebarMenu(
      menuItem("Welcome",icon = icon("house")),icon = icon("table"))
    )
  ),dashboardBody(
    tags$head(
      tags$style(
        HTML('
          #shiny-tab-tab2 h1 {
            color: red;
          }
        ')
      )
    ),tabItems(
      tabItem(
        "tab1",tags$h1('TAB1')
      ),tabItem(
        "tab2",tags$h1('TAB2')
      )
    )
    
  )
)

server <- function(input,output) {
  
}

shinyApp(ui,server)