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

Question

我正在尝试将一些actionButton放在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

您可以使用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) {}
)