使用shinydashboard重现flexdashboard布局

我试图用一个持久的边栏和几个选项卡重现一个

flexdashboard

简单的布局。这个问题与我最近提出的问题类似，但在后一个问题中，我使用了另一个SO答案中的一些代码，而在这个问题中，我使用了直接的

flexdashboard

代码

下面是一个简单的

flexdashboard

布局：

---
title: "Title of a Shiny app"
output: 
  flexdashboard::flex_dashboard
runtime: shiny
---

Sidebar {.sidebar}
=====================================

```{r}
textInput("test", "test")
actionButton("test_2", "test 2")
```

Tab 1
=====================================  

Tab 2
=====================================  

Tab 3
=====================================  

您可以看到它混合了一个持久的侧边栏和一个导航栏

然而，我不知道如何在

shinydashboard

中重现这一点：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    textInput("test", "test"),
    actionButton("test_2", "test 2")
  ),
  dashboardBody(
    tabsetPanel(
      tabPanel("Tab 1"),
      tabPanel("Tab 2"),
      tabPanel("Tab 3") 
    )
  )
)

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

shinyApp(ui, server)

库（闪亮）
图书馆（shinydashboard）
ui我不确定这是否适合您，但您可以使用shinydashboard和
隐藏的
仪表板侧栏来模拟flexdashboard的外观。但是，默认情况下，菜单向右对齐：

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(
    tags$li(class = "dropdown",
            tags$li(class = "dropdown", actionLink(inputId = "tab1dropdown", label = "Tab 1"), style = "position: absolute; left: 4.3%; top: 50%; transform: translate(-50%, -50%); font-weight: bold;"),
            tags$li(class = "dropdown", actionLink(inputId = "tab2dropdown", label = "Tab 2"), style = "position: absolute; left: 8%; top: 50%; transform: translate(-50%, -50%); font-weight: bold;"),
            tags$li(class = "dropdown", actionLink(inputId = "tab3dropdown", label = "Tab 3"), style = "position: absolute; left: 11.7%; top: 50%; transform: translate(-50%, -50%); font-weight: bold;"),
    )
  ),
  dashboardSidebar(
    textInput("test", "test"),
    actionButton("test_2", "test 2"),
    hidden(sidebarMenu(
        id = "sidebarID",
        menuItem("tab1", tabName = "tab1"),
        menuItem("tab2", tabName = "tab2"),
        menuItem("tab3", tabName = "tab3")
      ))
  ),
  dashboardBody(
    useShinyjs(),
    tabItems(
      tabItem("tab1", "Tab 1 content"),
      tabItem("tab2", "Tab 2 content"),
      tabItem("tab3", "Tab 3 content")
    )
  )
)

server <- function(input, output, session) {
  
  observeEvent(input$tab1dropdown, {
    updateTabItems(session, "sidebarID", selected = "tab1")
  })
  observeEvent(input$tab2dropdown, {
    updateTabItems(session, "sidebarID", selected = "tab2")
  })
  observeEvent(input$tab3dropdown, {
    updateTabItems(session, "sidebarID", selected = "tab3")
  })
  
}

shinyApp(ui, server)

库（闪亮）
图书馆（shinydashboard）
图书馆（shinyjs）
ui确实选项卡的位置不理想，我更喜欢它的左边。但我对在
shinydashboard
中使用导航栏选项卡的复杂性感到惊讶，因为使用
flexdashboard
shinydashboard或者更确切地说，AdminLTE只需使用另一种导航方法，只需几行即可。在我看来，它不打算通过标题中的标签导航。需要一些手动调整，但现在标签已向左对齐。请查看我的编辑。对齐方式再次不完美，当我悬停选项卡时，它们之间有一些重叠。也许这是因为屏幕大小。是的，css还远远不够完美。或者把它放在另一个问题上，找一个对css有更多经验的人，或者你开始自己花一些时间解决这个问题……也许这里有一个选择。虽然还没有得到我想要的结果，但这也是另一种依赖。