Как разместить изображение в левом и правом углу заголовка в Ршинах

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)

, который даст вам вывод, который выглядит следующим образом:

Надеюсь, это поможет!

[EDIT] : С небольшим 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)

Вывод, который вы получите: