Question

我目前正在开发仪表板。我需要将徽标放在标题的两边。预期的输出是：

但是我得到的输出是

使用的代码如下：

Ui.r

library(shiny)


shinyUI(
  fluidPage(
    titlePanel(
      fluidRow(
        column(3, img(height = 50, width = 30, src = "favicon.png")),
        column(9, "DDIM Use case Dashboard"), 
        column(2, img(height = 50, width = 30, src = "favicon.png"))
      )

  )

)
)

Server.r

shinyServer(function(input, output, session) {
})

有人可以帮助我解决这个问题吗？在此先感谢！

Answer 1

您可以执行以下操作：

library(shiny)


ui <- shinyUI(
  fluidPage(
    titlePanel(
      fluidRow(
        column(3, img(height = 50, width = 30, src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/R_logo.svg/32px-R_logo.svg.png")),
        column(8, "DDIM Use case Dashboard"), 
        column(1, img(height = 50, width = 30, src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/R_logo.svg/32px-R_logo.svg.png"))
      )

    )

  )
)

server <- shinyServer(function(input, output, session) {
})


shinyApp(ui, server)

这将为您提供如下输出：

希望有帮助！

[编辑] ：如下所示，使用一点CSS即可获得惊人的输出：

library(shiny)


ui <- shinyUI(
  fluidPage(
tags$head(tags$style(".header{background-color:black}
                     #title{
                         color: white;
                        text-align: center;
                     } ")),
  tags$div(class="header",
           titlePanel(
             fluidRow(
               column(3, img(height = 50, width = 30, src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/R_logo.svg/32px-R_logo.svg.png")),
               column(6,   tags$div(id="title","DDIM Use case Dashboard")), 
               column(2),
               column(1, img(height = 50, width = 30, src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/R_logo.svg/32px-R_logo.svg.png"))
             )

           )
      )
  )
)

server <- shinyServer(function(input, output, session) {
})


shinyApp(ui, server)

您得到的输出是：

如何在RShiny中将图像放置在标题的左右角

1 个答案: