调整 UI shindashboardPlus 中的元素位置 header

Question

我有一个闪亮的应用程序，在 Header 上有一个切换开关。按下切换按钮时，它会运行一个长函数，并向用户显示一条消息，表明正在发生某些事情。下面是一个非常简化的版本。

我拥有的功能很好，但 UI 未对齐。 header 上显示的开关和消息略高于左侧的最小化按钮（汉堡包）。我希望能够将开关和消息向下移动一点，以便它们与最小化按钮水平对齐，但我无法在 CSS 或各种 shiny/shinydashboard/shinydashboardPlus 函数。

此外，输出消息（和 htmlOutput 元素）在切换开关的右侧间隔很远，我想缩小切换开关和消息之间的间隙。

library(shiny)
library(shinycssloaders)
library(shinydashboard)
library(shinyjs)
library(shinydashboardPlus)
library(shinyWidgets)

# Define UI for application that draws a histogram
ui <- dashboardPage(skin = 'blue', 
                    
shinydashboardPlus::dashboardHeader(title = 'Example',
    leftUi = tagList(
        useShinyjs(),
        switchInput(inputId = 'swtLabels', label = 'Labels', value = TRUE,
                    onLabel = 'Label 1', offLabel = 'Label 2',
                    onStatus = 'info', offStatus = 'info', size = 'mini', 
                    handleWidth = 230),
        htmlOutput(outputId = 'labelMessage')
        )
    ),
    dashboardSidebar(),
    dashboardBody()
)

server <- function(input, output) {  
  observeEvent(input$swtLabels, {
     shinyjs::html(id = 'labelMessage', html = 'Starting...')
     shinyjs::showElement(id = 'labelMessage')
     Sys.sleep(1)
     shinyjs::html(id = 'labelMessage', html = 'Done') 
     shinyjs::hideElement(id = 'labelMessage', anim = TRUE, animType = 'fade', time = 2.0) 
  })
}

# Run the application 
shinyApp(ui = ui, server = server)

Answer 1

尝试margin-top: 6px。见下文。

library(shiny)
library(shinycssloaders)
library(shinydashboard)
library(shinyjs)
library(shinydashboardPlus)
library(shinyWidgets)

# Define UI for application that draws a histogram
ui <- dashboardPage(skin = 'blue', 
                    
                    shinydashboardPlus::dashboardHeader(title = 'Example',
                                                        leftUi = tagList(
                                                          useShinyjs(),
                                                          div(switchInput(inputId = 'swtLabels', label = 'Labels', value = TRUE,
                                                                      onLabel = 'Label 1', offLabel = 'Label 2',
                                                                      onStatus = 'info', offStatus = 'info', size = 'mini', 
                                                                      handleWidth = 230), style = "margin: 6px -20px;"),
                                                          div(htmlOutput(outputId = 'labelMessage'), 
                                                              style = "margin: 8px 0px 0px -60px;")
                                                        )
                    ),
                    dashboardSidebar(),
                    dashboardBody()
)

server <- function(input, output) {  
  observeEvent(input$swtLabels, {
    shinyjs::html(id = 'labelMessage', html = 'Starting...')
    shinyjs::showElement(id = 'labelMessage')
    Sys.sleep(1)
    shinyjs::html(id = 'labelMessage', html = 'Done') 
    shinyjs::hideElement(id = 'labelMessage', anim = TRUE, animType = 'fade', time = 2.0) 
  })
}

# Run the application 
shinyApp(ui = ui, server = server)

调整 UI shindashboardPlus 中的元素位置 header

Adjust UI element positions in shindashboardPlus header

r

shiny

shinydashboard

shinydashboardplus