Panel: Panel

PanelR Documentation

Panel

Description

Panels are overlays that contain supplementary content and are used for complex creation, edit, or management experiences.  For example, viewing details about an item in a list or editing settings.

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.

Usage

Panel(...)

Arguments

...

Props to pass to shiny.react::reactElement. See allowed props listed below in Details section

Details

  • allowTouchBodyScroll boolean
    Allow body scroll on content and overlay on touch devices. Changing after mounting has no effect.

  • className string
    Additional css class to apply to the Panel

  • closeButtonAriaLabel string
    Aria label on close button

  • componentId string
    Deprecated property. Serves no function.

  • componentRef IRefObject<IPanel>
    Optional callback to access the IPanel interface. Use this instead of ref for accessing the public methods and properties of the component.

  • customWidth string
    Custom panel width, used only when type is set to PanelType.custom.

  • elementToFocusOnDismiss HTMLElement
    Sets the HTMLElement to focus on when exiting the FocusTrapZone.

  • firstFocusableSelector string
    Indicates the selector for first focusable item. Deprecated, use focusTrapZoneProps.

  • focusTrapZoneProps IFocusTrapZoneProps
    Optional props to pass to the FocusTrapZone component to manage focus in the panel.

  • forceFocusInsideTrap boolean
    Indicates whether Panel should force focus inside the focus trap zone. If not explicitly specified, behavior aligns with FocusTrapZone's default behavior. Deprecated, use focusTrapZoneProps.

  • hasCloseButton boolean
    Has the close button visible.

  • headerClassName string
    Optional parameter to provider the class name for header text

  • headerText string
    Header text for the Panel.

  • headerTextProps React.HTMLAttributes<HTMLDivElement>
    The props for header text container.

  • ignoreExternalFocusing boolean
    Indicates if this Panel will ignore keeping track of HTMLElement that activated the Zone. Deprecated, use focusTrapZoneProps.

  • isBlocking boolean
    Whether the panel uses a modal overlay or not

  • isFooterAtBottom boolean
    Determines if content should stretch to fill available space putting footer at the bottom of the page

  • isHiddenOnDismiss boolean
    Whether the panel is hidden on dismiss, instead of destroyed in the DOM. Protects the contents from being destroyed when the panel is dismissed.

  • isLightDismiss boolean
    Whether the panel can be light dismissed.

  • isOpen boolean
    Whether the panel is displayed. If true, will cause panel to stay open even if dismissed. If false, will cause panel to stay hidden. If undefined, will allow the panel to control its own visility through open/dismiss methods.

  • layerProps ILayerProps
    Optional props to pass to the Layer component hosting the panel.

  • onDismiss (ev?: React.SyntheticEvent<HTMLElement>) => void
    A callback function for when the panel is closed, before the animation completes. If the panel should NOT be dismissed based on some keyboard event, then simply call ev.preventDefault() on it

  • onDismissed () => void
    A callback function which is called after the Panel is dismissed and the animation is complete. (If you need to update the Panel's isOpen prop in response to a dismiss event, use onDismiss instead.)

  • onLightDismissClick () => void
    Optional custom function to handle clicks outside the panel in lightdismiss mode

  • onOpen () => void
    A callback function for when the Panel is opened, before the animation completes.

  • onOpened () => void
    A callback function for when the Panel is opened, after the animation completes.

  • onOuterClick () => void
    Optional custom function to handle clicks outside this component

  • onRenderBody IRenderFunction<IPanelProps>
    Optional custom renderer for body region. Replaces any children passed into the component.

  • onRenderFooter IRenderFunction<IPanelProps>
    Optional custom renderer for footer region. Replaces sticky footer.

  • onRenderFooterContent IRenderFunction<IPanelProps>
    Custom renderer for content in the sticky footer

  • onRenderHeader IPanelHeaderRenderer
    Optional custom renderer for header region. Replaces current title

  • onRenderNavigation IRenderFunction<IPanelProps>
    Optional custom renderer navigation region. Replaces the region that contains the close button.

  • onRenderNavigationContent IRenderFunction<IPanelProps>
    Optional custom renderer for content in the navigation region. Replaces current close button.

  • overlayProps IOverlayProps
    Optional props to pass to the Overlay component that the panel uses.

  • styles IStyleFunctionOrObject<IPanelStyleProps, IPanelStyles>
    Call to provide customized styling that will layer on top of the variant rules.

  • theme ITheme
    Theme provided by High-Order Component.

  • type PanelType
    Type of the panel.

Best practices

Layout

  • Use for self-contained experiences where someone doesn’t need to interact with the app view to complete the task.

  • Consider how the panel and its contained contents will scale across responsive web breakpoints.

Header
  • Include a close button in the top-right corner.

  • Lock the title to the top of the panel.

  • The header can contain a variety of components. Components are stacked under the main title, locked to the top, and push content down.

Body
  • The body is a flexible container that can house a wide variety of components, content, and formatting.

  • Content can scroll.

Footer
  • Standard footers include primary and secondary buttons to confirm or cancel the changes or task.

  • Read-only panels may contain a single Close button.

  • Lock the footer to the bottom of the panel.

Content

Title
  • Titles should explain the panel content in clear, concise, and specific terms.

  • Keep the length of the title to one line, if possible.

  • Use sentence-style capitalization—only capitalize the first word. For more info, see [Capitalization] in the Microsoft Writing Style Guide.

  • Don’t put a period at the end of the title.

[capitalization]: https://docs.microsoft.com/style-guide/capitalization

Button labels
  • Be concise. Limit labels to one or two words. Usually a single verb is best. Include a noun if there’s any room for interpretation about what the verb means. For example, “Save” or “Save settings.”

Examples

library(shiny.fluent)

if (interactive()) {
  shinyApp(
    ui = div(
      DefaultButton.shinyInput("showPanel", text = "Open panel"),
      reactOutput("reactPanel")
    ),
    server = function(input, output) {
      isPanelOpen <- reactiveVal(FALSE)
      output$reactPanel <- renderReact({
        Panel(
          headerText = "Sample panel",
          isOpen = isPanelOpen(),
          "Content goes here.",
          onDismiss = JS("function() { Shiny.setInputValue('hidePanel', Math.random()); }")
        )
      })
      observeEvent(input$showPanel, isPanelOpen(TRUE))
      observeEvent(input$hidePanel, isPanelOpen(FALSE))
    }
  )
}

Appsilon/shiny.fluent documentation built on June 12, 2022, 2:41 a.m.