css - 如何在闪亮的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)

标签： cssrbuttonshinyshinywidgets

Answer 1

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

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)