For more details and examples visit the official docs. The R package can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

KeytipLayer(...)

Arguments

componentRef

IRefObject<IKeytipLayer>
Optional callback to access the KeytipLayer component. Use this instead of ref for accessing the public methods and properties of the component.

keytipExitSequences

IKeytipTransitionKey[]
List of key sequences that will exit keytips mode

keytipReturnSequences

IKeytipTransitionKey[]
List of key sequences that execute the return functionality in keytips (going back to the previous level of keytips)

keytipStartSequences

IKeytipTransitionKey[]
List of key sequences that will start keytips mode

onEnterKeytipMode

() => void
Callback function triggered when keytip mode is entered

onExitKeytipMode

(ev?: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => void
Callback function triggered when keytip mode is exited. ev is the Mouse or Keyboard Event that triggered the exit, if any.

calloutProps

ICalloutProps
ICalloutProps to pass to the callout element

content

string
Content to put inside the keytip

disabled

boolean
T/F if the corresponding control for this keytip is disabled

hasDynamicChildren

boolean
Whether or not this keytip will have children keytips that are dynamically created (DOM is generated on keytip activation). Common cases are a Pivot or Modal.

hasMenu

boolean
Whether or not this keytip belongs to a component that has a menu Keytip mode will stay on when a menu is opened, even if the items in that menu have no keytips

keySequences

string[]
Array of KeySequences which is the full key sequence to trigger this keytip Should not include initial 'start' key sequence

offset

Point
Offset x and y for the keytip, added from the top-left corner By default the keytip will be anchored to the bottom-center of the element

onExecute

(executeTarget: HTMLElement | null, target: HTMLElement | null) => void
Function to call when this keytip is activated. 'executeTarget' is the DOM element marked with 'data-ktp-execute-target'. 'target' is the DOM element marked with 'data-ktp-target'.

onReturn

(executeTarget: HTMLElement | null, target: HTMLElement | null) => void
Function to call when the keytip is the currentKeytip and a return sequence is pressed. 'executeTarget' is the DOM element marked with 'data-ktp-execute-target'. 'target' is the DOM element marked with 'data-ktp-target'.

overflowSetSequence

string[]
Full KeySequence of the overflow set button, will be set automatically if this keytip is inside an overflow

styles

IStyleFunctionOrObject<IKeytipStyleProps, IKeytipStyles>
Optional styles for the component.

theme

ITheme
Theme for the component

visible

boolean
T/F if the keytip is visible

Examples

library(shiny.fluent)

if (interactive()) {
  shinyApp(
    ui = tagList(
      tags$script(HTML([1827 chars quoted with '"'])),
      textOutput("keytipsResult"),
      div(
        Label("To open keytips, hit 'Alt-Windows' on Windows/Linux and 'Option-Control' on macOS. Keytips will appear. Type what you see, e.g. 1 and then A to 'click' the first button."),
        Label("When multiple Keytips start with the same character, typing that character will filter the visible keytips."),
        KeytipLayer(),
        Stack(horizontal = TRUE, tokens = list(childrenGap = 20),
          DefaultButton.shinyInput("button1", keytipProps = JS("keytipMap.Button"), text = "Button"),
          CompoundButton.shinyInput("button2",
            style = list(marginBottom = 28),
            keytipProps = JS("keytipMap.CompoundButton"),
            text = "Compound Button",
            secondaryText = 'With a Keytip'
          ),
          DefaultButton.shinyInput("button3",
            keytipProps = JS("keytipMap.ButtonWithMenu"),
            text = "Button with Menu",
            menuProps = JS("buttonProps")
          )
        )
      )
    ),
    server = function(input, output) {
      clicks <- reactiveVal(0)
      addClick <- function() clicks(clicks() + 1)
      output$keytipsResult <- renderText(paste("Buttons clicked: ", clicks()))
      observeEvent(input$button1, addClick())
      observeEvent(input$button2, addClick())
      observeEvent(input$button3, addClick())
    }
  )

}