如何在shiny.fluent中实现带自定义分组标题的Nav导航组件

你只需要在Nav组件中传入onRenderGroupHeader参数，通过shiny.fluent提供的JS()函数封装自定义渲染逻辑即可，修改后的完整可运行代码如下：

library(shiny)
library(shiny.fluent)

navigation_styles <- list(
  root = list(
    height = "100%",
    width = "30%",
    boxSizing = "border-box",
    border = "1px solid #eee",
    overflowY = "auto"
  )
)

link_groups <- list(
  list(name = 'Pages', 
       links = list( 
         list(name = 'Activity', key = "key1"),
         list(name = 'News', key = "key2"))),
  list(name = 'More Pages',
       links = list(
         list(name = 'Settings', key = "key3"),
         list(name = 'Notes', key = "key4")
       )
  )
)

shinyApp(
  ui = fluidPage(
    Nav(
      groups = link_groups,
      selectedKey = "key1",
      styles = navigation_styles,
      # 自定义分组头部渲染逻辑
      onRenderGroupHeader = JS("
        (group) => {
          return <h3 style={{
            margin: '12px 8px 8px 12px',
            fontSize: '16px',
            fontWeight: 600,
            color: '#323130'
          }}>{group.name}</h3>
        }
      ")
    )
  ),
  server = function(input, output) {
  }
)

实现说明：

• JS()函数可以将原生JavaScript代码直接传递给Fluent UI组件的回调属性，和官方示例的_onRenderGroupHeader逻辑完全对应
• 可以根据需求调整h3标签的style属性值，匹配你需要的视觉样式
• 自定义渲染头部后默认不会生成折叠按钮，自然实现了分组标题不可折叠的效果，和官方示例行为一致

内容的提问来源于stack exchange，提问作者Tadro