如何使图标的大小一致时，使用闪亮和Shinydashboard？ [英] How to make the size of icon consistent when using Shiny and Shinydashboard?

问题描述

我正在我闪亮的应用程序中添加可点击的图标，以显示弹出的信息框。请看下面的截图和代码示例。我的策略是将actionLink的文本和代码包装在HTML函数中。这样做效果很好。但是，图标的大小由关联的大小决定。我想知道是否可以使所有图标的大小相同，例如与selectInput相关联的最小图标？

https://shiny.rstudio.com/reference/shiny/1.0.1/icon.html文档(https://shiny.rstudio.com/reference/shiny/1.0.1/icon.html)提到，在icon函数中设置"fa-3x"，使大小是正常的3倍。但在我的例子中，大小将由关联的文本确定，并且每个文本都有不同的大小。所以我猜这个策略不会奏效。如果有人能分享他们的想法或建议，那就太好了。

# Load the packages
library(shiny)
library(shinydashboard)
library(shinyalert)

# User Interface
ui <- dashboardPage(
  header = dashboardHeader(title = ""),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem(
        text = "Example",
        tabName = "tab1"
      )
    )
  ),
  body = dashboardBody(
    # A call to use the shinyalert package
    useShinyalert(),

    tabItems(
      tabItem(
        tabName = "tab1",
        h2(HTML("This is a title",
           as.character(actionLink(inputId = "info1", 
                                   label = "", 
                                   icon = icon("info"))))),
        fluidRow(
          box(
            title = HTML("This is the title of the box",
                         as.character(actionLink(inputId = "info2", 
                                                 label = "", 
                                                 icon = icon("info")))), 
            status = "primary", solidHeader = TRUE,
            selectInput(inputId = "Select", 
                        label = HTML("This is the title of the selectInput",
                                     as.character(actionLink(inputId = "info3", 
                                                             label = "", 
                                                             icon = icon("info")))), 
                        choices = 1:3)
          )
        )
      )
    )
  )
)

server <- function(input, output, session){
  observeEvent(input$info1, {
    shinyalert(text = "Info 1", type = "info")
  })
  observeEvent(input$info2, {
    shinyalert(text = "Info 2", type = "info")
  })
  observeEvent(input$info3, {
    shinyalert(text = "Info 3", type = "info")
  })
}

# Run the app
shinyApp(ui, server)

推荐答案

我不确定我是否正确理解了您的问题，但如果您希望它们都有相同的大小，您可以调整图标的字体大小，如下所示：

# Load the packages
library(shiny)
library(shinydashboard)
library(shinyalert)

# User Interface
ui <- dashboardPage(
  header = dashboardHeader(title = ""),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem(
        text = "Example",
        tabName = "tab1"
      )
    )
  ),
  body = dashboardBody(
    # A call to use the shinyalert package
    useShinyalert(),

    tabItems(
      tabItem(
        tabName = "tab1",
        h2(HTML("This is a title", "<font size='3'>",
                as.character(actionLink(inputId = "info1", 
                                        label = "", 
                                        icon = icon("info"))), "</font>")),
        fluidRow(
          box(
            title = HTML("This is the title of the box", "<font size='3'>",
                         as.character(actionLink(inputId = "info2", 
                                                 label = "", 
                                                 icon = icon("info"))), "</font>"), 
            status = "primary", solidHeader = TRUE,
            selectInput(inputId = "Select", 
                        label = HTML("This is the title of the selectInput", "<font size='3'>", as.character(actionLink(inputId = "info3", 
                                                                                                                   label = "", 
                                                                                                                   icon = icon("info"))), "</font>"
                                     ), 
                        choices = 1:3)
          )
        )
      )
    )
  )
)

server <- function(input, output, session){
  observeEvent(input$info1, {
    shinyalert(text = "Info 1", type = "info")
  })
  observeEvent(input$info2, {
    shinyalert(text = "Info 2", type = "info")
  })
  observeEvent(input$info3, {
    shinyalert(text = "Info 3", type = "info")
  })
}

# Run the app
shinyApp(ui, server)

这篇关于如何使图标的大小一致时，使用闪亮和Shinydashboard？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！