htmlrshinyfluent

R Shiny app : bold text inside shiny.fluent::Text (Microsoft Fluent design)


very quick question : how can I set text passed to the shiny.fluent::Text function to render bold ? more generally, how to pass styling options to this function ?

In the help page of the function, it is written

You can specify the variant prop to apply font styles to Text. This variant pulls from the Fluent UI React theme loaded on the page.

but I don't understand how to use this variant parameter.

I have tried setting class=ms-fontWeight-bold at different places and play with the variant parameter but I found nothing working...

Sorry, surely newbie's question but I am new to Fluent and I find the shiny.fluent package quite poorly documented (maybe because I am too unexperienced...)...

Thanks in advance for any help

Reproducible example :

library(shiny)
library(shiny.fluent)


ui <- fluentPage(
  tags$style(".card { padding: 28px; margin-bottom: 28px; }"),
  uiOutput("analysis")
)
server <- function(input, output, session) {
  output$analysis <- renderUI({
    Stack(
      horizontal = TRUE,
      tokens = list(childrenGap = 10),
      div(
        # << how can I set this text to be large ??????????????????
        Text("Test", variant="large")# , class = "ms-fontWeight-bold" ### does not work
      )
    )
  })
}
shinyApp(ui, server)

Solution

  • You can wrap the text to be displayed in a div with the desired class:

    library(shiny)
    library(shiny.fluent)
    
    
    ui <- fluentPage(
      tags$style(".card { padding: 28px; margin-bottom: 28px; }"),
      uiOutput("analysis")
    )
    server <- function(input, output, session) {
      output$analysis <- renderUI({
        Stack(
          horizontal = TRUE,
          tokens = list(childrenGap = 10),
          div(
            Text(
              "Test",
              variant = "large"
            )
          ),
          div(
            Text(
              div(
                class = "ms-fontWeight-bold",
                "Test"
              ),
              variant = "large"
            )
          )
        )
      })
    }
    shinyApp(ui, server)
    

    enter image description here