如何编码侧边栏折叠闪亮只显示图标
M. *_*eil 5 html css r shiny shinydashboard
如果您熟悉闪亮的网站,您会注意到当您按下按钮折叠侧边栏时,它会显示更大的图标(但不会完全隐藏侧边栏.
你知道如何编写这个代码吗？
我听说这个包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 bootstrap主题的navbar)和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";
}
'}))