[英]How to make the size of icon consistent when using Shiny and Shinydashboard?
I am adding clickable icons in my shiny app to show a popup information box.我在我的 shiny 应用程序中添加可点击图标以显示弹出信息框。 Please see the following screenshot and code example.
请参阅以下屏幕截图和代码示例。 My strategy is to wrap my text and the code for
actionLink
in the HTML
function.我的策略是将我的文本和
actionLink
的代码包装在HTML
function 中。 This works well.这很好用。 However, the size of the icon is determined by the size of the associated.
但是,图标的大小是由关联的大小决定的。 I would like to know if it is possible to make all the icons the same size, such as the smallest one associated with the
selectInput
?我想知道是否可以使所有图标大小相同,例如与
selectInput
关联的最小图标?
The documentation ( https://shiny.rstudio.com/reference/shiny/1.0.1/icon.html ) mentioned that it is to set "fa-3x"
in the icon
function to make the size to be 3 times as normal. The documentation ( https://shiny.rstudio.com/reference/shiny/1.0.1/icon.html ) mentioned that it is to set
"fa-3x"
in the icon
function to make the size to be 3 times as normal . But in my case the size would sill be determined by the associated text and each text has a different size.但在我的情况下,大小将由相关文本确定,并且每个文本都有不同的大小。 So I guess this strategy would not work.
所以我猜这个策略是行不通的。 It would be great if anyone can share their ideas or suggestions.
如果有人能分享他们的想法或建议,那就太好了。
# 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)
I'm not sure if I understand your question correctly but if you want the them all to have the same size you can adapt the font size for the icons like this:我不确定我是否正确理解了您的问题,但如果您希望它们都具有相同的大小,您可以调整图标的字体大小,如下所示:
# 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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.