Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @react-md/expansion-panel

Index

Interfaces

Variables

Functions

Variables

Const ExpansionList

ExpansionList: ForwardRefExoticComponent<ExpansionListProps & RefAttributes<HTMLDivElement>> = ...

This component is honestly not very helpful since it does not apply any styles. It is a simple wrapper for a <div> that updates the props to require the children and onKeyDown props.

Const ExpansionPanel

ExpansionPanel: ForwardRefExoticComponent<ExpansionPanelProps & RefAttributes<HTMLDivElement>> = ...

The expansion panel renders a header element (that is just a button) and dynamically shows content once expanded.

Const ExpansionPanelHeader

ExpansionPanelHeader: ForwardRefExoticComponent<ExpansionPanelHeaderProps & RefAttributes<HTMLButtonElement>> = ...

The header for a panel that controls the expansion state. This is really just a simple button that displays the children before an expander icon.

Reminder: Since this is a <button>, only inline elements should be rendered within (so use <span> instead of <div> for children).

Functions

usePanels

  • This hook is used to control the expansion of a list of panels along with providing some of the required props for each panel. This hook will provide an ordered list of:

    • the list of panel props that include the id, key, expanded, and onExpandChange.
    • a keydown event handler to pass to a parent component (normally the ExpansionList) to allow keyboard movement with the arrow keys, and home+end keys. This should only be used when there are multiple panels.
    • the current list of panel ids that are expanded
    • the React setState dispatcher for controlling the expanded list of ids manually if desired
    • a function to create a handler for toggling the expansion of a specific panel

    This hook is usually used to control a list of expansion panels, but can also control a single panel if desired.

    Examples:

    Single panel:

    const [panels] = usePanels({ count: 1, idPrefix: "my-panel" });
    // since the count is one, it'll just be a list of only one panel props
    const [panelProps] = panels;

    return (
      <ExpansionPanel {...panelProps}>
        Content within the panel...
      </ExpansionPanel>
    );

    Multiple Panels:

    const [panels, onKeyDown] = usePanels({ count: 3, idPrefix: "panel-list" });

    const [panel1Props, panel2Props, panel3Props] = panels;

    return (
      <ExpansionList onKeyDown={onKeyDown}>
        <ExpansionPanel {...panel1Props}>
          Panel 1 Content...
        </ExpansionPanel>
        <ExpansionPanel {...panel2Props}>
          Panel 2 Content...
        </ExpansionPanel>
        <ExpansionPanel {...panel3Props}>
          Panel 3 Content...
        </ExpansionPanel>
      </ExpansionList>
    );

    Parameters

    Returns ReturnValue

Generated using TypeDoc