Shiny.Semantic 侧边栏布局不符合 R 中的预期行为

Shiny.Semantic sidebar layout not conforming to expected behavior in R

Shiny.semantic repo 标识下面的示例代码。 在 UI 演示文稿中,这显示为有一个侧边栏,然后是一个面板,其中两张卡片并排放置。然而,当 运行 在 Golem 项目本地时,我看到所有东西都垂直堆叠,侧边栏没有表现出侧边栏行为。

此外,我将这段代码移动到它自己的非项目 R 文件中,并且 运行 它具有相同的行为,在 RStudio 和 Chrome 的预览 window 中。

有没有人看到过这种行为,有什么想法可以解决吗?稍后我将使用 R 4.X 进行测试,但希望这不是版本问题。

ui <- semanticPage(


title = "My first page",
  h1("My page"),
  sidebar_layout(
    sidebar_panel(
      dropdown_input("mtcars_dropdown", c("mpg", "cyl", "disp", "hp"), value = "mpg"),
      textOutput("dropdown")
    ),
    main_panel(
      segment(
         cards(
           class = "two",
           card(class = "red",
             div(class = "content",
                 div(class = "header", "Main title card 1"),
                 div(class = "meta", "Sub title card 1"),
                 div(class = "description", "More detail description card 1")
             )
           ),
           card(class = "blue",
             div(class = "content",
                 div(class = "header", "Main title card 2"),
                 div(class = "meta", "Sub title card 2"),
                 div(class = "description", "More detail description card 2")
             )
           )
         )
      )
      )
    )
)

server <- function(input, output, session) {
  output$dropdown <- renderText(input$mtcars_dropdown)
}

shinyApp(ui, server)

平台x86_64-w64-mingw32
拱门 x86_64
osmingw32
系统 x86_64, mingw32
状态
专业 3
未成年人 6.3
2020 年
02 月
第 29 天
svn 版本 77875
语言 R
version.stringR 版本 3.6.3 (2020-02-29) 昵称抱风向袋

附加信息 以下代码明确应设置网格系统以复制本机内容。当 运行 在 R 版本 4.0.3 中时,这仍然会垂直显示所有内容。

ui <- semanticPage(
    shinyjs::useShinyjs(),
    
    grid(
        grid_template = grid_template(
            default = list(
                areas = rbind(
                    c("title", "title"),
                    c("sidebar", "cardarea"),
                    c("sidebar", "cardarea")
                ),
                cols_width = c("25%", "75%"),
                rows_height = c("40px", "100px", "auto")
            )
        ),
    
    
    
    title = "My first page",
    h1("My page"),
    sidebar = sidebar_layout(
        sidebar_panel(
            dropdown_input("mtcars_dropdown", c("mpg", "cyl", "disp", "hp"), value = "mpg"),
            textOutput("dropdown")
        ),
        main_panel()
    ),
        cardarea = 
            segment(
                cards(
                    class = "two",
                    card(class = "red",
                         div(class = "content",
                             div(class = "header", "Main title card 1"),
                             div(class = "meta", "Sub title card 1"),
                             div(class = "description", "More detail description card 1")
                         )
                    ),
                    card(class = "blue",
                         div(class = "content",
                             div(class = "header", "Main title card 2"),
                             div(class = "meta", "Sub title card 2"),
                             div(class = "description", "More detail description card 2")
                         )
                    )
                )
            )
        
    )
    
)

server <- function(input, output, session) {
    output$dropdown <- renderText(input$mtcars_dropdown)
}

shinyApp(ui, server)

我还尝试比较了一个使用 2020 年竞赛 Shiny.Semantic 的应用。这是来自 Appsilon.ai 站点上的 FIFA 示例

这来自本地相同的代码 运行。颜色不同,布局不正确。

此格式问题似乎与 shiny.semantic 的当前 git 版本有关。版本 0.4.2

卸载发行版并安装开发版可以解决问题,shiny.semantic 可以按预期正确格式化。

远程::install_github("Appsilon/shiny.semantic@develop")