如何编写闪亮的侧边栏折叠以仅显示图标 [英] How to code a Sidebar collapse in shiny to show only icons
问题描述
如果您熟悉
）：
折叠后：
< body id =appclass =app ng-scope buffer-pinterest nav-collapsed-mindata- custom-page =data-off-canvas-nav =data-ng-controller =AppCtrl>
<您可以通过两个伟大的库的一点帮助来完成该任务：shinydashboard（基于AdminLTE引导主题获取导航栏）和shinyjs（包括需要的模板类）。以下工作代码：
## app.R ##
库（闪亮）
库（shinydashboard ）
library（shinyjs）
ui< - dashboardPage（
dashboardHeader（），
dashboardSidebar（sidebarMenu（menuItem（'Test'，icon = icon（' （'test app'），
useShinyjs（））
）
$ b服务器< ; - 函数（输入，输出）{
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 =隐藏;
}
'}））
If you are familiar with the shiny website, you'll notice that when you press the button to collapse the sidebar, it's showing bigger icons (but not completely hiding the sidebar.
Do you know how is this possible to code this?
I heard that the package shinyBS could be useful or bootstrap things, but I don't understand what it is.
Before collapsing:
<body id="app" class="app ng-scope buffer-pinterest" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">
And this (see highlighted text):
After collapsing:
<body id="app" class="app ng-scope buffer-pinterest nav-collapsed-min" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl">
You can accomplish that with a little help of two great libraries: shinydashboard (obtaining navbar based on AdminLTE bootstrap theme) and shinyjs (including neccessary class to the template). Working code below:
## 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)
EDIT: To solve the problem mentioned in the comment I play with visibility: hidden css style. New content of server part of the app (rest remains unchanged):
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";
}
'}))
这篇关于如何编写闪亮的侧边栏折叠以仅显示图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
