如何更改shinydashboard中侧边栏的字体大小

问题描述 投票:1回答:1

我是闪亮仪表板的新手,不熟悉CSS,谁能告诉我如何更改shinydashboard中侧边栏的字体大小?非常感谢,下面是我的代码。

library('shinydashboard')
library(shiny)
ui <- dashboardPage(
  dashboardHeader(title = 'Test'),
  dashboardSidebar(
    sidebarMenu(
      menuItem('Tab1', tabName = '1', icon = icon('dashboard')),
      menuItem('Tab2', tabName = '2', icon = icon('th'))
    )),
  dashboardBody(tabItems(
    #First tab content
    tabItem(tabName = '1',
            fluidRow(
              box(plotOutput('plot1', height = 250)),
              box(tilte = 'Controls',
                  sliderInput('slider', 'Number of obs', 1, 100, 50))
            )),
    #Second tab content
    tabItem(tabName = '2',
            h2('Some text here'))
  ))
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}
shinyApp(ui, server)

enter image description here

r shiny shinydashboard
1个回答
1
投票

如果您只想更改侧边栏的字体大小,请输入以下代码:

library('shinydashboard')
library(shiny)
ui <- dashboardPage(
 dashboardHeader(title = 'Test'),
 dashboardSidebar(
   sidebarMenu(
     menuItem('Tab1', tabName = '1', icon = icon('dashboard')),
     menuItem('Tab2', tabName = '2', icon = icon('th'))
   )),
 dashboardBody(
  tags$head( 
    tags$style(HTML(".main-sidebar { font-size: 20px; }")) #change the font size to 20
   ),
tabItems(
#First tab content
tabItem(tabName = '1',
        fluidRow(
          box(plotOutput('plot1', height = 250)),
          box(tilte = 'Controls',
              sliderInput('slider', 'Number of obs', 1, 100, 50))
        )),
#Second tab content
tabItem(tabName = '2',
        h2('Some text here'))
  ))
)

server <- function(input, output) {
 set.seed(122)
 histdata <- rnorm(500)
 output$plot1 <- renderPlot({
   data <- histdata[seq_len(input$slider)]
   hist(data)
  })
 }
 shinyApp(ui, server)

但是,如果您想在CSS中进行更多更改,我建议您创建一个css文件,并使用以下代码在闪亮的应用程序中调用它:tags$head(includeCSS(path =www/style.css"))

您可以在这里找到更多详细信息和教程:https://shiny.rstudio.com/articles/css.html

© www.soinside.com 2019 - 2024. All rights reserved.