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(...)
IRefObject<IKeytipLayer>
Optional callback to access the KeytipLayer component. Use this instead of ref for accessing the public methods and properties of the component.
IKeytipTransitionKey[]
List of key sequences that will exit keytips mode
IKeytipTransitionKey[]
List of key sequences that execute the return functionality in keytips (going back to the previous level of keytips)
IKeytipTransitionKey[]
List of key sequences that will start keytips mode
() => void
Callback function triggered when keytip mode is entered
(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.
ICalloutProps
ICalloutProps to pass to the callout element
string
Content to put inside the keytip
boolean
T/F if the corresponding control for this keytip is disabled
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.
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
string[]
Array of KeySequences which is the full key sequence to trigger this keytip Should not include initial 'start' key sequence
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
(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'.
(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'.
string[]
Full KeySequence of the overflow set button, will be set automatically if this keytip is inside an overflow
IStyleFunctionOrObject<IKeytipStyleProps, IKeytipStyles>
Optional styles for the component.
ITheme
Theme for the component
boolean
T/F if the keytip is visible
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())
}
)
}