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

Apply css formating only on specific tabItem of a shiny dashboard(仅在闪亮仪表板的特定选项卡项上应用CSS格式)
本文介绍了仅在闪亮仪表板的特定选项卡项上应用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格式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

在小程序端input为number类型的表单,调出的键盘只有数字且没有小数点和负号。显然并不符合要求。所以我们用text类型来自己判断 1,必须为数字 2,第一位不是小数点,且只能出现一个小数点 3,负号只能出现在第一位,且只能出现一次 4,如果
file对象转blob对象进行预览的实例代码: //获取到 file文件var reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = function (event) { let blob = new Blob([event.target.result], { type: file.type }); //{ type: file.type } 预览blob发现乱码可能是type不对 要获取file文件的
js文件上传前的预览和删除实例代码,具体如下: !DOCTYPE htmlhtml lang="en" head meta charset="UTF-8" / meta http-equiv="X-UA-Compatible" content="IE=edge" / meta name="viewport" content="width=device-width, initial-scale=1.0" / title文件上传预览和删除/title style #img-box{display: flex;
一、下拉选择 改动三个地方:下拉选择模板、数据渲染、下拉选择监听填充数据 //表格{ title: '是否棚改房span class="titletips"*/span', field: 'sfpgf', align: 'center', width: 110, // edit: 'text', templet: function (d) { return 'select name="sfpgf" class="sel_xlk" lay-filter="sfpgf" l
layui表格:设置表头居中,内容居左的实例代码:表头在属性中控制,内容直接用css样式控制 { field: 'Result', title: '结果', align: 'center', width: '60%', templet: function (d) { return 'div style="text-align:left"' + d.Result + '/div' }},
element el-tree树结构刷新后保留展开状态解决方法 我们在使用element的el-tree组件的时候,当我们给树结构重新赋值后,树节点就全部自动合上了。所以我们要记录展开状态,方法如下 html代码如下: el-tree ref="tree" :data="treeList" :highlight-current="true" :