代码之家 › 专栏 › 技术社区 › Kevin

Shinydashboard:使侧边栏面板覆盖在主面板上

shinydashboard shiny css

Kevin · 技术社区 · 5 年前

sidebarPanel mainPanel 在一个 tabBox 但是使用 z-index 好像没用。一、 e.当点击按钮时,盒子的大小不应该改变似乎,它应该只是覆盖 主面板

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

  header <- dashboardHeader()
  sidebar <- dashboardSidebar()

  body <- dashboardBody(
    useShinyjs(),
    fluidRow(
      div(id = "TimingBox",
          tabBox(id = "Timing",
                 tabPanel("Tab 1", 
                    sidebarLayout(
                      div(id = "Sidebar",
                          style = "z-index: 1000;",
                          sidebarPanel("There are currently 20 overdue here", width = 6)
                      ),

                      mainPanel(plotOutput("plot1"), width = 12)
                    )
                 ),
                 tabPanel("Tab 2"),
                 title = p("Status",actionLink("Link", NULL, icon = icon("plus-square-o")),actionLink("Link2", NULL, icon = icon("search"))), width = 4,
                 selected = "Tab 1"
          )
      )
    )
  )

  ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {

  shinyjs::hide(id = "Sidebar")

  observeEvent(input$Link, {
    shinyjs::toggle(id = "Sidebar")
  })


  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(50)]
    hist(data)
  })


}

shinyApp(ui, server)

0 回复 | 直到 5 年前

Frank Steiner 5 年前

对于主边栏

因此,改变这些价值观不会给你带来你想要的行为。

通过这段代码,您可以实现这一点,只需将其添加到仪表板主体

tags$style(".content-wrapper{margin-left: 0px;}")

生成以下完整代码:

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

header <- dashboardHeader()
sidebar <- dashboardSidebar()

body <- dashboardBody(
useShinyjs(),
tags$style(".content-wrapper{margin-left: 0px;}"),
fluidRow(
    div(id = "TimingBox",
        tabBox(id = "Timing",
            tabPanel("Tab 1", 
                        sidebarLayout(
                        div(id = "Sidebar",
                            style = "z-index: 1000;",
                            sidebarPanel("There are currently 20 overdue here", width = 6)
                        ),

                        mainPanel(plotOutput("plot1"), width = 12)
                        )
            ),
            tabPanel("Tab 2"),
            title = p("Status",actionLink("Link", NULL, icon = icon("plus-square-o")),actionLink("Link2", NULL, icon = icon("search"))), width = 4,
            selected = "Tab 1"

        )
    )
)
)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {

shinyjs::hide(id = "Sidebar")

observeEvent(input$Link, {
    shinyjs::toggle(id = "Sidebar")
})


set.seed(122)
histdata <- rnorm(500)

output$plot1 <- renderPlot({
    data <- histdata[seq_len(50)]
    hist(data)
})


}

shinyApp(ui, server)

编辑:

对于“信息图标”侧栏:

以下操作将按您的要求执行: 将以下内容添加到侧边栏div的样式参数将完成此操作

 position: fixed;

尽管这是一个解决方案,但我强烈建议您签出shinydasboardPlus包和他们的新版本的标签框侧边栏/帮助。也许这对你来说也没问题,也不需要你太多的努力 https://github.com/RinteRface/shinydashboardPlus https://rinterface.com/shiny/shinydashboardPlus/

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

header <- dashboardHeader()
sidebar <- dashboardSidebar()

body <- dashboardBody(
  useShinyjs(),
  fluidRow(
    div(id = "TimingBox",
        tabBox(id = "Timing",
               tabPanel("Tab 1", 
                        sidebarLayout(
                          div(id = "Sidebar",
                              style = "z-index: 1000;position: fixed;",
                              sidebarPanel("There are currently 20 overdue     here", width = 6)
                          ),

                          mainPanel(plotOutput("plot1"), width = 12)
                        )
               ),
               tabPanel("Tab 2"),
               title = p("Status",actionLink("Link", NULL, icon = icon("plus-square-o")),actionLink("Link2", NULL, icon = icon("search"))), width = 4,
               selected = "Tab 1"
        )   
      )
      )
    )

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {

  shinyjs::hide(id = "Sidebar")

  observeEvent(input$Link, {
        shinyjs::toggle(id = "Sidebar")
  })


  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(50)]
    hist(data)
 })



   }

shinyApp(ui, server)