html - 如何在闪亮和闪亮的仪表板中将图标放在输入小部件的标题上
问题描述
是否可以在 Shiny and Shiny 和 Shiny 仪表板中的输入小部件标题中添加图标?下面是一个例子。我想为每个输入小部件添加一个图标,以指示它是数字输入(使用条形图图标)还是文本输入(使用字体图标)。现在,我正在使用两列。一个width = 1
用于图标,另一个用于输入小部件。如果我可以直接将图标添加到标题中,那就太好了。请让我知道是否有办法实现这一目标。
library(shiny)
library(shinydashboard)
header <- dashboardHeader(
title = "Icon Example"
)
sidebar <- dashboardSidebar(
sidebarMenu(
menuItem(
text = "Input",
tabName = "Input"
)
)
)
body <- dashboardBody(
tabItem(
tabName = "Input",
fluidRow(
column(
width = 6,
box(
status = "primary", solidHeader = TRUE,
width = 12,
title = "Box 1",
fluidRow(
column(width = 1,
tags$div(HTML('<i class="fa fa-bar-chart" style = "color:#0072B2;"></i>'))
),
column(width = 11,
numericInput(inputId = "Num", label = "This is a numeric input", value = 1000))
),
fluidRow(
column(width = 1,
tags$div(HTML('<i class="fa fa-font" style = "color:#D55E00;"></i>'))
),
column(width = 11,
textInput(inputId = "Text", label = "This is a text input")
)
)
)
)
)
)
)
# User Interface
ui <- dashboardPage(
header = header,
sidebar = sidebar,
body = body
)
# Server logic
server <- function(input, output, session){}
# Complete app with UI and server components
shinyApp(ui, server)
这是我的代码示例的屏幕截图。我想让输入字段的开头与图标对齐(如红色箭头所示)。换句话说,我希望图标可以是输入小部件标题的一部分。
解决方案
编辑:
为了增加代码的可读性,我们可以使用icon
而不是HTML
:
numericInput(inputId = "Num", label = div(icon("bar-chart", style = "color:blue;"), " This is a numeric input"), value = 1000)
初步答案:
只需使用 yourdiv
作为标签:
library(shiny)
library(shinydashboard)
header <- dashboardHeader(title = "Icon Example")
sidebar <- dashboardSidebar(sidebarMenu(menuItem(text = "Input", tabName = "Input")))
body <- dashboardBody(tabItem(tabName = "Input",
fluidRow(column(
width = 6,
box(
status = "primary",
solidHeader = TRUE,
width = 12,
title = "Box 1",
fluidRow(column(
width = 11,
numericInput(
inputId = "Num",
label = tags$div(HTML('<i class="fa fa-bar-chart" style = "color:#0072B2;"></i> This is a numeric input')),
value = 1000
)
)),
fluidRow(column(
width = 11,
textInput(
inputId = "Text",
label = tags$div(HTML('<i class="fa fa-font" style = "color:#D55E00;"></i> This is a text input'))
)
))
)
))))
# User Interface
ui <- dashboardPage(header = header,
sidebar = sidebar,
body = body)
# Server logic
server <- function(input, output, session) {}
# Complete app with UI and server components
shinyApp(ui, server)
推荐阅读
- typescript - Storybook 显示 [Vue 警告]:未知的自定义元素:
并且不挂载 Typescript 组件 - laravel - 使用 eloquent whereMonth 查询日期是字符串
- jpa - 使用 Criteria API 的具有嵌套 JOIN 的复杂 JPA 查询
- python-3.x - 如何将 sys.argv 字符串转换为列表
- php - 从查询中检索第一个插入 ID 并插入到多查询中不起作用
- python - 使用 TensorRT 部署语义分割网络(U-Net)(不支持上采样)
- xml - 在 XSLT 转换期间删除 XML 名称空间?
- python - 如何实现“如果发生错误不执行此代码”?
- c# - 第一次 foreach 循环后 hTTPResponse.Content.ReadAsStringAsync().Result 上的空消息
- javascript - 为什么我应该在 urql 上使用 Apollo/Relay?