Keytips — KeytipLayer • shiny.fluent

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())
    }
  )

}