Как поместить значок для заголовка входного виджета в панели инструментов Shiny и Shiny - PullRequest
Новая
       25

Как поместить значок для заголовка входного виджета в панели инструментов Shiny и Shiny

1 голос
/ 08 мая 2019

Можно ли добавить значок к названию виджета ввода в панели инструментов Shiny и Shiny and 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)

Вот скриншот моего примера кода.Я бы хотел, чтобы начало поля ввода было выровнено по значку (как показано красными стрелками).Другими словами, я надеюсь, что значок может быть частью заголовка виджета ввода.

enter image description here

Ответы [ 2 ]

1 голос
/ 08 мая 2019

Просто используйте div в качестве метки: 

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)

Результат: enter image description here

1 голос
/ 08 мая 2019

Этого можно добиться, обернув icon() до span() и tagList().Проверьте обновленный код ниже: 

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 = span(tagList(icon("bar-chart"), "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))
          )
        ),

        box(
          status = "primary", solidHeader = TRUE,
          width = 12,
          title = span(tagList(icon("font"), "Box 2")),
          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)

enter image description here

...