如何编写闪亮的侧边栏折叠以仅显示图标
问题描述:
如果您熟悉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">
答
可以完成与两个大图书馆的帮助不大: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";
}
'}))
太棒了!按钮(您在其上折叠以折叠侧边栏的按钮)可以保持原位吗?现在,它正在与酒吧一起移动。这呈现了一个切碎的标题。但不适用于shinyapps.io网站。 –
我通过切换标题的可见性来解决这个问题(点击侧栏上的折叠使其不可见 - style.visibility =“hidden” - 并再次单击它可以再次显示。它可能不是最理想的解决方案,但至少可以工作:D – jniedzwiecki
非常感谢,作为一个额外的超级奖金,侧栏可以崩溃,但不是页眉? –