如何在闪亮的 xs 以下减小按钮的大小？

Question

我想在我的应用程序中添加信息按钮，当鼠标悬停在上面时会显示工具提示。我有一个有效的代码，但按钮的尺寸太大了。有什么方法可以通过 css 或更可自定义尺寸的按钮来编辑吗？

感谢您的帮助

library(shiny)
library(shinyWidgets)
library(shinyBS)

ui <- fluidPage(uiOutput("test_button"))

server <- function(input, output) { 
  
  output$test_button <- renderUI({
    
    tipify(
      actionBttn(inputId = "id_my_button",
                      icon = icon("info"),
                      size = "xs",
                      style = "material-circle",
                      color = "primary"),
      "This button needs to be smaller!")
    
    })
  
}

shinyApp(ui, server)

Answer 1

您可以使用以下一些已添加到您的代码中的 CSS 属性来自定义 xs 大小设置。

library(shiny)
library(shinyWidgets)
library(shinyBS)

ui <- fluidPage(
  
  tags$head(
    tags$style(".bttn-material-circle.bttn-xs { 
                            
                            width: 16px !important; 
                            height: 16px !important;
                            font-size: 6px !important;
                            line-height: 1px !important;
                            padding: 0px !important;

               }")
  ),
  uiOutput("test_button")
  
  )

server <- function(input, output) { 
  
  output$test_button <- renderUI({
    
    tipify(
      actionBttn(inputId = "id_my_button",
                 icon = icon("info"),
                 size =
                 style = "material-circle",
                 color = "primary"),
      "This button needs to be smaller!")
    
  })
  
}

shinyApp(ui, server)

如何在闪亮的 xs 以下减小按钮的大小？

How to reduce size of button below xs in shiny?

css

r

button

shiny

shinywidgets