Estoy tratando de usar shiny.fluent e implementar uno de los ejemplos de navegación de la página de documentación de la interfaz de usuario fluida de Microsoft. El ejemplo usa algo de JavaScript para aplicar un estilo de encabezado a los encabezados de grupo y no estoy seguro de cómo aplicar JavaScript en R.

Ejemplo mínimo a continuación:

 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'), list(name = 'News'))), list(name = 'More Pages', links = list( list(name = 'Settings'), list(name = 'Notes') ) ) ) shinyApp( ui = fluidPage( Nav( groups = link_groups, selectedKey = "key1", styles = navigation_styles ) ), server = function(input, output) { } )

Y se parece a esto. Los encabezados de grupo son elementos de menú plegables que no es lo que quiero.

el ejemplo de Microsoft es el último ejemplo en esta página . Su código de ejemplo a continuación:

 import * as React from 'react'; import { Nav, INavLinkGroup } from '@fluentui/react/lib/Nav'; const navLinkGroups: INavLinkGroup[] = [ { name: 'Pages', links: [ { name: 'Activity', url: 'http://msn.com', key: 'key1', target: '_blank' }, { name: 'News', url: 'http://msn.com', key: 'key2', target: '_blank' }, ], }, { name: 'More pages', links: [ { name: 'Settings', url: 'http://msn.com', key: 'key3', target: '_blank' }, { name: 'Notes', url: 'http://msn.com', key: 'key4', target: '_blank' }, ], }, ]; export const NavCustomGroupHeadersExample: React.FunctionComponent = () => { return ( <Nav onRenderGroupHeader={_onRenderGroupHeader} ariaLabel="Nav example with custom group headers" groups={navLinkGroups} /> ); }; function _onRenderGroupHeader(group: INavLinkGroup): JSX.Element { return <h3>{group.name}</h3>; }

Se parece a esto:

¿Alguien puede ayudarme a implementar esto en shiny.fluent? Gracias.