Is there a way to hide panes so that the other pane occupies all the space of the pare

Lazy loading hidden tabs would be interesting <a class="user-mention notranslate" data

Toggle panes? about react-split-pane HOT 3 CLOSED

tomkp commented on May 31, 2024 1

Toggle panes?

from react-split-pane.

Comments (3)

chris-cooper commented on May 31, 2024 10

In case it's of interest I was able to do this by adding the following css...

div.SplitPane.soloPane1.vertical > .Pane2,
div.SplitPane.soloPane2.vertical > .Pane1 {
    width: 0px !important;
}

div.SplitPane.soloPane1.vertical > .Pane1,
div.SplitPane.soloPane2.vertical > .Pane2 {
    width: 100% !important;
}

div.SplitPane.soloPane1.horizontal > .Pane2,
div.SplitPane.soloPane2.horizontal > .Pane1 {
    height: 0px !important;
}

div.SplitPane.soloPane1.horizontal > .Pane1,
div.SplitPane.soloPane2.horizontal > .Pane2 {
    height: 100% !important;
}

You can then add a class to your SplitPane...

<SplitPane className="soloPane1">

This is isolated to the immediate descendent panes due to the selector > so allows individual control when nesting panes.

from react-split-pane.

mathew-kurian commented on May 31, 2024

Lazy loading hidden tabs would be interesting @tomkp

from react-split-pane.

bburns commented on May 31, 2024

Here's how I'm toggling a pane on/off with version 2 and React - when it's at 0 width the slider is still grabbable on the right side of the screen. toggleSidebar is called from a button.

  const [showSidebar, setShowSidebar] = React.useState(false)
  function toggleSidebar() {
    setShowSidebar(!showSidebar)
  }

...

      <SplitPane>
        <div className="ag-theme-balham">
          <AgGridReact
            {...grid.options}
            rowData={filtered}
            onGridReady={onGridReady}
            onCellFocused={onCellFocused}
          >
          </AgGridReact>
        </div>
        <Pane initialSize={showSidebar ? "20%" : "0"}>
          <table className="row">
            <tbody>
              {row && row.type && fieldsByType[row.type].map(field => (
                <tr>
                  <td className="field">{toTitleCase(field)}</td>
                  <td className="value">{row[field]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Pane>
      </SplitPane>