如何使shinydashboard中的一个选项卡不可见？

huangapple
go评论242阅读模式
英文:

How can I make a tab of a shinydashboard invisible?

问题

我尝试使用CSS样式（对按钮有效）来隐藏以下应用程序的第三个选项卡：

  1. library(shiny)
  2. library(shinydashboard)
  3. library(shinyDashboardPlus)
  4. library(shinyjs)
  6. ui <- dashboardPage(
  7.   dashboardHeader(),
  8.   dashboardSidebar(
  9.     sidebarMenu(
  10.       id = "tabs",  # 为侧边栏菜单设置一个ID
  11.       menuItem("选项卡1", tabName = "tab1"),
  12.       menuItem("选项卡2", tabName = "tab2"),
  13.       menuItem("隐藏选项卡", tabName = "invisible_tab", style = "visibility: hidden;")
  14.     )
  15.   ),
  16.   dashboardBody(
  17.     tabItems(
  18.       tabItem(
  19.         tabName = "tab1",
  20.         useShinyjs()
  21.       ),
  22.       tabItem(
  23.         tabName = "tab2",
  24.         useShinyjs(), 
  25.         h3("选项卡2")
  26.       ),
  27.       tabItem(
  28.         tabName = "invisible_tab",
  29.         h3("隐藏选项卡内容")
  30.       )
  31.     )
  32.   )
  33. )
  35. server <- function(input, output, session) {
  36. }
  38. shinyApp(ui, server)

选项卡的内容不会显示，但选项卡的标题仍然显示在侧边栏中...我如何使它隐藏，就像它不存在一样？

英文:

I've tried using CSS styling (that works on buttons) to hide the third tab of the following app:

  1. library(shiny)
  2. library(shinydashboard)
  3. library(shinyDashboardPlus)
  4. library(shinyjs)
  6. ui &lt;- dashboardPage(
  7.   dashboardHeader(),
  8.   dashboardSidebar(
  9.     sidebarMenu(
  10.       id = &quot;tabs&quot;,  # Set an ID for the sidebar menu
  11.       menuItem(&quot;Tab 1&quot;, tabName = &quot;tab1&quot;),
  12.       menuItem(&quot;Tab 2&quot;, tabName = &quot;tab2&quot;),
  13.       menuItem(&quot;Invisible Tab&quot;, tabName = &quot;invisible_tab&quot;, style = &quot;visibility: hidden;&quot;)
  14.     )
  15.   ),
  16.   dashboardBody(
  17.     tabItems(
  18.       tabItem(
  19.         tabName = &quot;tab1&quot;,
  20.         useShinyjs()
  21.       ),
  22.       tabItem(
  23.         tabName = &quot;tab2&quot;,
  24.         useShinyjs(), 
  25.         h3(&quot;tab2&quot;)
  26.       ),
  27.       tabItem(
  28.         tabName = &quot;invisible_tab&quot;,
  29.         h3(&quot;Invisible Tab Content&quot;)
  30.       )
  31.     )
  32.   )
  33. )
  35. server &lt;- function(input, output, session) {
  36. }
  38. shinyApp(ui, server)

The content of the tab is not displayed, but the title of the tab remains in the sidebar... How can I hide it just as is did not exist?

答案1

得分: 1

  1. 所有`menuItem`都由一个带有`href`属性的`&lt;a&gt;`标签定义，该属性构造为`#shiny-tab-[tabName]`，其中`tabName`是`menuItem`的相应参数。
  3. 因此，如果你使用以下方式定义你的`menuItem`：

menuItem("Invisible Tab", tabName = "invisible_tab")

  1. 那么你可以应用以下`CSS`：

a[href = '#shiny-tab-invisible_tab']{
visibility: hidden;
}

  1. 以使其不可见。
  1. library(shiny)
  2. library(shinydashboard)
  3. library(shinydashboardPlus)
  4. library(shinyjs)
  6. ui &lt;- dashboardPage(
  7.     dashboardHeader(),
  8.     dashboardSidebar(
  9.         tags$head(tags$style(HTML(&quot;
  10.                                   a[href = &#39;#shiny-tab-invisible_tab&#39;]{
  11.                                       visibility: hidden;
  12.                                   }
  13.                                   &quot;))),
  14.         sidebarMenu(
  15.             id = &quot;tabs&quot;,  # 为侧边栏菜单设置一个ID
  16.             menuItem(&quot;Tab 1&quot;, tabName = &quot;tab1&quot;),
  17.             menuItem(&quot;Tab 2&quot;, tabName = &quot;tab2&quot;),
  18.             menuItem(&quot;Invisible Tab&quot;, tabName = &quot;invisible_tab&quot;)
  19.         )
  20.     ),
  21.     dashboardBody(
  22.         tabItems(
  23.             tabItem(
  24.                 tabName = &quot;tab1&quot;,
  25.                 useShinyjs()
  26.             ),
  27.             tabItem(
  28.                 tabName = &quot;tab2&quot;,
  29.                 useShinyjs(), 
  30.                 h3(&quot;tab2&quot;)
  31.             ),
  32.             tabItem(
  33.                 tabName = &quot;invisible_tab&quot;,
  34.                 h3(&quot;Invisible Tab Content&quot;)
  35.             )
  36.         )
  37.     )
  38. )
  40. server &lt;- function(input, output, session) {
  41. }
  43. shinyApp(ui, server)
英文:

All menuItem are defined by an &lt;a&gt; tag with an href attribute which is constructed as #shiny-tab-[tabName], where tabName is the corresponding parameter of menuItem.

Hence if you define your menuItem using

  1. menuItem(&quot;Invisible Tab&quot;, tabName = &quot;invisible_tab&quot;)

then you can apply the CSS

  1. a[href = &#39;#shiny-tab-invisible_tab&#39;]{
  2.     visibility: hidden;
  3. }

for setting it unvisible.

如何使shinydashboard中的一个选项卡不可见？

  1. library(shiny)
  2. library(shinydashboard)
  3. library(shinydashboardPlus)
  4. library(shinyjs)
  6. ui &lt;- dashboardPage(
  7.     dashboardHeader(),
  8.     dashboardSidebar(
  9.         tags$head(tags$style(HTML(&quot;
  10.                                   a[href = &#39;#shiny-tab-invisible_tab&#39;]{
  11.                                       visibility: hidden;
  12.                                   }
  13.                                   &quot;))),
  14.         sidebarMenu(
  15.             id = &quot;tabs&quot;,  # Set an ID for the sidebar menu
  16.             menuItem(&quot;Tab 1&quot;, tabName = &quot;tab1&quot;),
  17.             menuItem(&quot;Tab 2&quot;, tabName = &quot;tab2&quot;),
  18.             menuItem(&quot;Invisible Tab&quot;, tabName = &quot;invisible_tab&quot;)
  19.         )
  20.     ),
  21.     dashboardBody(
  22.         tabItems(
  23.             tabItem(
  24.                 tabName = &quot;tab1&quot;,
  25.                 useShinyjs()
  26.             ),
  27.             tabItem(
  28.                 tabName = &quot;tab2&quot;,
  29.                 useShinyjs(), 
  30.                 h3(&quot;tab2&quot;)
  31.             ),
  32.             tabItem(
  33.                 tabName = &quot;invisible_tab&quot;,
  34.                 h3(&quot;Invisible Tab Content&quot;)
  35.             )
  36.         )
  37.     )
  38. )
  40. server &lt;- function(input, output, session) {
  41. }
  43. shinyApp(ui, server)

huangapple
  • 本文由 发表于 2023年8月11日 01:34:54
  • 转载请务必保留本文链接：https://go.coder-hub.com/76878092.html
  • css
  • r
  • shiny
  • shinydashboard
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定