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