仅在闪亮仪表板的特定选项卡项上应用CSS格式

Apply css formating only on specific tabItem of a shiny dashboard(仅在闪亮仪表板的特定选项卡项上应用CSS格式)

问题描述

我有一个下面的应用程序，我想在其中只在Slight仪表板的特定表项上应用CSS格式，但这两个表项都应用了它。如何将其指定为仅在第一天应用？

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", Times, serif;
  text-align: right;
  background-color: linen;
}
  H2{
  font-size: 16pt;
  font-weight: bold;
  font-family: "Chronicle Display Light", Times, serif;
  text-align: left;
  background-color: linen;
}

    '))),
              fluidRow(column(3,h3("Concent"))),
              tags$hr(),
              fluidRow(column(3,h5(strong("Investigators")))),
              fluidRow(column(9,"The investigators of this project are:")),
              fluidRow(column(9,"Dr Adam Hodgkins","(",tags$a (href="adam@hodgkins.com.au","adam@hodgkins.com.au"),")")),
              fluidRow(column(9,"Dr Hodgkins can be contacted by telephone on 0414 296 699. ")),
              tags$hr(),
              fluidRow(column(3,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."")),
              fluidRow(column(12,"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. ")),
              fluidRow(column(12,"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.


")),
              tags$hr(),
              fluidRow(column(12,"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",
              fluidRow(column(3,h3("Concent"))),
              tags$hr(),
              fluidRow(column(3,h5(strong("Investigators")))),
              fluidRow(column(9,"The investigators of this project are:")),
              fluidRow(column(9,"Dr Adam Hodgkins","(",tags$a (href="adam@hodgkins.com.au","adam@hodgkins.com.au"),")")),
              fluidRow(column(9,"Dr Hodgkins can be contacted by telephone on 0414 296 699. ")),
              tags$hr(),
              fluidRow(column(3,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."")),
              fluidRow(column(12,"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. ")),
              fluidRow(column(12,"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)

推荐答案

尽量使您的问题代码最小。您的menuItem周围也缺少sidebarMenu。这里使用代码的简化版本突出显示要执行的操作。

首先将样式标记移动到仪表板正文。即使您将其放入表格项目中，它也将始终位于页面的顶部！

要将样式限制为特定的tabItem，请在样式表中的选择器前面加上#SHINY-TAB-TABNAME(用您的选项卡名替换TABNAME)

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Welcome", tabName = "tab1", icon = icon("house")),
      menuItem("Information", tabName = "tab2", 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)

这篇关于仅在闪亮仪表板的特定选项卡项上应用CSS格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！