Shiny + CSS:在shinydashboard侧边栏中对齐actionButtons

Question

我试图将一些actionButtons放在shinydashboard侧边栏中,并且需要将它们设置为在侧边栏中居中并在分配给它们的空间内水平分布.

这是一个MWE:

library(shiny)
library(shinydashboard)

foo_body = dashboardBody()
foo_header = dashboardHeader()
foo_sidebar = dashboardSidebar(
  sidebarMenu(
    menuItem(
      "A Dashboard", 
      tabName = "tab_overview",
      icon = icon("gamepad")  
    )
  ),
  # add some buttons
  actionButton(inputId = "button1", label = "B 1", icon = icon("paper-plane")),
  actionButton(inputId = "button2", label = "B 2", icon = icon("paper-plane")),
  actionButton(inputId = "button3", label = "B 3", icon = icon("paper-plane"))
)

foo_page = dashboardPage(
  header = foo_header,
  sidebar = foo_sidebar,
  body = foo_body,
  title = "A Dashboard"
)

shinyApp(
  ui = foo_page,
  server = function(input, output) {}
)

以下是我需要重新设计的应用程序的相关部分:

任何一般或具体的想法都会受到欢迎.

Answer 1

您可以为按钮添加样式,如此.我在按钮之间留下了1%的边距

library(shiny)
library(shinydashboard)

foo_body = dashboardBody()
foo_header = dashboardHeader()
foo_sidebar = dashboardSidebar(
  sidebarMenu(
    menuItem(
      "A Dashboard", 
      tabName = "tab_overview",
      icon = icon("gamepad")  
    )
  ),
  # add some buttons  
  div(style="display:inline-block;width:32%;text-align: center;",actionButton("button1", label = "B 1", icon = icon("paper-plane"))),
  div(style="display:inline-block;width:32%;text-align: center;",actionButton("button2", label = "B 2", icon = icon("paper-plane"))),
  div(style="display:inline-block;width:32%;text-align: center;",actionButton("button3", label = "B 3", icon = icon("paper-plane")))

)

foo_page = dashboardPage(
  header = foo_header,
  sidebar = foo_sidebar,
  body = foo_body,
  title = "A Dashboard"
)

shinyApp(
  ui = foo_page,
  server = function(input, output) {}
)

Answer 2

您可以使用just fluidRow和来排列按钮column，这更易于使用并且可以更好地响应调整大小。

如果需要更改排列，请调整列的宽度和偏移量，就像常规的Shiny布局一样。请注意，随着您的代码在我的计算机中的显示方式有所不同，闪亮的仪表板样式可能已经演变。

library(shiny)
library(shinydashboard)

foo_body = dashboardBody()
foo_header = dashboardHeader()
foo_sidebar = dashboardSidebar(
  sidebarMenu(
    menuItem(
      "A Dashboard", 
      tabName = "tab_overview",
      icon = icon("gamepad")  
    )
  ),
  # add some buttons
  fluidRow(
    column(3, offset = 0, 
           actionButton(inputId = "button1", label = "B 1", icon = icon("paper-plane"))),
    column(3, offset = 0, 
           actionButton(inputId = "button2", label = "B 2", icon = icon("paper-plane"))),
    column(3, offset = 0, 
           actionButton(inputId = "button3", label = "B 3", icon = icon("paper-plane")))
  )
)

foo_page = dashboardPage(
  header = foo_header,
  sidebar = foo_sidebar,
  body = foo_body,
  title = "A Dashboard"
)

shinyApp(
  ui = foo_page,
  server = function(input, output) {}
)