如何编写闪亮的侧边栏折叠以仅显示图标

如果您熟悉the shiny website，您会注意到，当您按下按钮折叠侧边栏时，它会显示更大的图标（但不会完全隐藏侧边栏）如何编写闪亮的侧边栏折叠以仅显示图标

你知不知道，这怎么可能实现代码

听说包shinyBS可能是有用的或引导的东西，但我不知道它是什么

之前崩溃：？

<body id="app" class="app ng-scope buffer-pinterest" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">

这（见突出显示的文本）：

崩溃后：

<body id="app" class="app ng-scope buffer-pinterest nav-collapsed-min" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">

来源

2016-12-27 M. Beausoleil

可以完成与两个大图书馆的帮助不大：shinydashboard（根据AdminLTE引导主题获取导航栏）和shinyjs（包括模板的必需类）。下面的工作代码：

## app.R ## 
library(shiny) 
library(shinydashboard) 
library(shinyjs) 

ui <- dashboardPage(
    dashboardHeader(), 
    dashboardSidebar(sidebarMenu(menuItem('Test', icon = icon('phone'), tabName = 'sampletabname'))), 
    dashboardBody(h3('Test app'), 
       useShinyjs()) 
) 

server <- function(input, output) { 
    runjs(' 
     var el2 = document.querySelector(".skin-blue"); 
     el2.className = "skin-blue sidebar-mini"; 
     ') 
} 

shinyApp(ui, server)

编辑：为了解决在评论我的知名度打提到的问题：隐藏的CSS样式。应用服务器部分的新内容（其余部分保持不变）：

runjs({' 
     var el2 = document.querySelector(".skin-blue"); 
     el2.className = "skin-blue sidebar-mini"; 
     var clicker = document.querySelector(".sidebar-toggle"); 
     clicker.id = "switchState"; 
    '}) 

    onclick('switchState', runjs({' 
     var title = document.querySelector(".logo") 
     if (title.style.visibility == "hidden") { 
      title.style.visibility = "visible"; 
     } else { 
      title.style.visibility = "hidden"; 
     } 
    '}))

来源

2016-12-29 15:32:57 jniedzwiecki

太棒了！按钮（您在其上折叠以折叠侧边栏的按钮）可以保持原位吗？现在，它正在与酒吧一起移动。这呈现了一个切碎的标题。但不适用于shinyapps.io网站。 –

我通过切换标题的可见性来解决这个问题（点击侧栏上的折叠使其不可见 - style.visibility =“hidden” - 并再次单击它可以再次显示。它可能不是最理想的解决方案，但至少可以工作：D – jniedzwiecki

非常感谢，作为一个额外的超级奖金，侧栏可以崩溃，但不是页眉？ –

如何编写闪亮的侧边栏折叠以仅显示图标

回答

相关问题