html侧边栏缩小出现图标,HTML – 如何编码侧边栏折叠闪亮只显示图标

你可以通过两个很棒的库来帮助你实现这个目标：shinydashboard(获取基于AdminLTE bootstrap主题的navbar)和shinyjs(包括模板的必要类).工作代码如下：

## app.R ##

library(shiny)

library(shinydashboard)

library(shinyjs)

ui

dashboardHeader(),

dashboardSidebar(sidebarMenu(menuItem('Test', icon = icon('phone'), tabName = 'sampletabname'))),

dashboardBody(h3('Test app'),

useShinyjs())

)

server

runjs('

var el2 = document.querySelector(".skin-blue");

el2.className = "skin-blue sidebar-mini";

')

}

shinyApp(ui, server)

编辑：

为了解决评论中提到的问题,我使用visibility：hidden 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";

}

'}))