r - R Shiny Application中的材料设计，折叠和展开卡片

Question

我有一些构建 R-Shiny 应用程序的经验，但我是材料设计的新手。偶然发现了闪亮材料包，它很棒，但是缺少闪亮引导 UI 框架提供的一些功能，例如手风琴/扩展面板。

shinymaterial 包中有 material_card() 来创建卡片，我想知道是否有办法添加一些 HTML 以启用 material_card 函数的展开/折叠功能，使用 tags$div 用于 HTML 和/或 tags$script对于 js。

下面是我的（悲伤的）尝试。见代表：

library(shiny)
library(shinymaterial)

# Wrap shinymaterial apps in material_page
ui <- material_page(
  title = "Basic Page + Side-Nav + Tabs",
  # Place side-nav in the beginning of the UI
  material_side_nav(
    fixed = FALSE,
    tags$h3("Side-Nav Content")
  ),
  # Define tabs
  material_row(
    material_tabs(
      tabs = c(
        "First Tab" = "first_tab",
        "Second Tab" = "second_tab"
      )
    ),
    material_column(width = 8,
  # Define tab content
               material_tab_content(
    tab_id = "first_tab",
    material_card(title = "mycard",
    tags$h1("First Tab Content"),
    tags$div(
      HTML("<mat-card>
             <mat-card-header>
             <mat-card-title style='font-size: 20px;'>mycard</mat-card-title>
             </mat-card-header>
             <mat-card-content *ngIf='!collapsed'>
             <p>This is some example text.</p>
             <p>This text will disappear when you use the action button in the actions bar below.</p>
             </mat-card-content>
             <mat-card-actions>
             <button mat-button (click)='collapsed=true'>Collapse text</button>
             <button mat-button (click)='collapsed=false'>Uncollapse text</button>
             </mat-card-actions>
             </mat-card>")
    )
    )
                 
  ),
  material_tab_content(
    tab_id = "second_tab",
    material_card(title = NULL,
    tags$h1("Second Tab Content")
    )
 )
 ),
 material_column(width=4,
                 div(style='padding:15px;'),
                 material_tabs(
                   tabs = c(
                     "Third Tab" = "third_tab",
                     "Fourth Tab" = "fourth_tab"
                   )
                 ),
    material_tab_content(
      tab_id = "third_tab",
      material_card(title = NULL,
      tags$h1("Third Tab Content")
      )
  ),
    material_tab_content(
      tab_id = "fourth_tab",
      material_card(title = NULL,
      tags$h1("Fourth Tab Content")
      )
    )
)
)
)

server <- function(input, output) {
  
}
shinyApp(ui = ui, server = server)

标签： rshinymaterializeshinyjs