@react-md/expansion-panel
    TypeScript icon, indicating that this package has built-in type declarations

    5.1.3 • Public • Published

    @react-md/expansion-panel

    Expansion panels are used to create disclosure widgets that show additional information once the component has been toggled to an "open" state. In other words, expansion panels are a styled version of a details element.

    An expansion panel can be rendered standalone or within a group with the ExpansionList component and usePanels hook.

    Installation

    npm install --save @react-md/expansion-panel

    This package is not super helpful on its own, so it is recommended to also install the following packages:

    npm install --save @react-md/theme \
      @react-md/typography \
      @react-md/list \
      @react-md/icon

    Documentation

    You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

    Usage

    Expansion panels are normally rendered within a list of two or more panels. To create such a list, you'll want to use the ExpansionList and ExpansionPanel components and usePanels hook:

    import { render } from "react-dom";
    import {
      ExpansionList,
      ExpansionPanel,
      usePanels,
    } from "@react-md/expansion-panel";
    
    const App = () => {
      const [panels, onKeyDown] = usePanels({
        count: 3,
        idPrefix: "my-panel-group",
      });
    
      const [panel1Props, panel2Props, panel3Props] = panels;
    
      return (
        <main>
          <ExpansionList onKeyDown={onKeyDown}>
            <ExpansionPanel {...panel1Props} headerChildren="Panel 1">
              Panel 1 contents...
            </ExpansionPanel>
            <ExpansionPanel {...panel2Props} headerChildren={<span>Panel 2</span>}>
              Panel 2 contents...
            </ExpansionPanel>
            <ExpansionPanel {...panel3Props} headerChildren="Panel 1">
              Panel 3 contents...
            </ExpansionPanel>
          </ExpansionList>
        </main>
      );
    };
    
    render(<App />, document.getElementById("root"));

    Install

    npm i @react-md/expansion-panel

    DownloadsWeekly Downloads

    1,284

    Version

    5.1.3

    License

    MIT

    Unpacked Size

    121 kB

    Total Files

    51

    Last publish

    Collaborators

    • mlaursen