LoginSignup
1
2

More than 5 years have passed since last update.

shinydashboardのサイドバーをデフォで隠す方法

Posted at

タイトル通り、shinydashboardで生成したページのサイドバーをデフォルトで隠す方法です。
結論から言うと、shinyjsを使ってクラスを追加してやればOKです。

例えば、こんなコードがあったとする。

ui.R
library(shiny)
library(shinydashboard)

sd_header <- dashboardHeader()

sd_sidebar <- dashboardSidebar(
 menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
 menuItem("Widgets", tabName = "widgets", icon = icon("th"))
)

sd_body <- dashboardBody( 
 tabItems(
  tabItem(tabName = "dashboard",
          infoBoxOutput(outputId = "dashboard")
  ),
  tabItem(tabName = "widgets",
          h2("widgets")
  )
 )
)

dashboardPage(
 sd_header,
 sd_sidebar,
 sd_body
)
server.R
library(shiny)

shinyServer(function(input, output) {
 output$dashboard <- renderInfoBox(
  infoBox(title = "dadshboard", icon = icon("thumbs-up"))
 )
})

で、こういうページが生成されてるはず。
Untitled.jpeg

でも、デフォでサイドバーを隠しておきたいときだってあるはずですが
dashboardSidebarには特にそのあたりを指定する引数が無い。。。

やり方

じゃあどうすれば良いか?と探してみたらshinyjsというライブラリを使ってaddClassを使ってclassを追加してあげればOKのようです。

shinyjsはserverとuiどちらにもコードを追加する必要があり
serverにはaddClass()、uiにはdashboardBody()の中にuseShinyjs()をそれぞれ追加し、
次のようなコードになります。

ui.R
library(shiny)
library(shinydashboard)

sd_header <- dashboardHeader()

sd_sidebar <- dashboardSidebar(
 menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
 menuItem("Widgets", tabName = "widgets", icon = icon("th"))
)

sd_body <- dashboardBody( 
 useShinyjs(),
 tabItems(
  tabItem(tabName = "dashboard",
          infoBoxOutput(outputId = "dashboard")
  ),
  tabItem(tabName = "widgets",
          h2("widgets")
  )
 )
)

dashboardPage(
 sd_header,
 sd_sidebar,
 sd_body
)
server.R
library(shiny)
library(shinyjs)

shinyServer(function(input, output) {
 addClass(selector = "body", class = "sidebar-collapse")

 output$dashboard <- renderInfoBox(
  infoBox(title = "dadshboard", icon = icon("thumbs-up"))
 )
})

これで、ページを開いた状態でサイドバーは閉じた状態になります。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2