R语言 如何在使用bslib主题时覆盖标题和选项卡的文本大小?

2exbekwf  于 2023-04-03  发布在  其他
关注(0)|答案(1)|浏览(175)

我目前正在使用bslib包在模态对话框中显示漂亮的值框。但是,我想更改模态对话框中当前标题和选项卡的大小/字体。我如何在保留值框的bslib引导主题的同时做到这一点?有没有一种方法可以只在值框上使用bslib主题?

library(shiny)
library(leaflet)
library(bslib)
library(bsicons)

# Define UI for application that draws a histogram
data <- PlantGrowth
data$Lat <- runif(nrow(data), 40, 41)
data$Lon <- runif(nrow(data), -1, 3)
data <- rbind(data[1,], data[11,])

ui <- bootstrapPage(
  theme = bslib::bs_theme(bootswatch = "lumen"),
  leafletOutput("map", height="100vh"),
  absolutePanel(style="padding-left: 30px; padding-right: 30px; padding-top: 10px; padding-bottom: 10px",
                top = 10, left = 10, width = 300, height = "auto",
                actionButton("button", "Show all data")
  )
)

server <- function(input, output) {
  
  observeEvent(list(input$map_marker_click$id, input$button), {
    showModal(
      modalDialog(
        title = "Title",
        tabsetPanel(
          tabPanel(
            "TAB 1",
            fluidPage(
              fluidRow(
                column(4,
                       value_box(
                         title = "TEXT 1",
                         value = h4("Value 2"), 
                         showcase = icon("arrow-trend-up"),
                         full_screen = F,
                         theme_color = "warning"
                       )
                )
              )
            )
          ),
          tabPanel(
            "TAB 2"
          )
        ),
        easyClose = T,
      ))
  }, ignoreInit = T)
  
  output$map<-
    renderLeaflet({
      plot.map <-
        leaflet(
          data = data
        ) %>% 
        addTiles() %>% 
        addCircleMarkers(
          lat = ~ Lat, lng = ~ Lon,
          layerId = ~ group)
      return(plot.map)
    })
}

# Run the application 
shinyApp(ui = ui, server = server)
6l7fqoea

6l7fqoea1#

你可以修改CSS font-size的modal title类和modal tabs类,在bootstrapPage(theme = bslib::bs_theme(bootswatch = "lumen"),之间添加:

tags$head(
    
    tags$style(
      
      HTML("
/* Change the title font size */

.modal-title {
  font-size: 100px;
}

/* Change the tab font size */
.nav-tabs {
  font-size: 40px;
}

")
      
    )
    
    
  ),

下面是一张图片:

浏览器中的Web开发工具非常适合查找html元素和动态修改CSS。这里有一个链接,提供了有关在shiny中使用CSS的更多信息:https://shiny.rstudio.com/articles/css.html

相关问题