Skip to main content

AdvancedFlexPanels Component

Description​

The AdvancedFlexPanels component is a bi-dimensional, resizable layout system that allows for:

  • Dynamic resizing of both rows and columns
  • Drag-and-drop reordering of child elements
  • Smooth animations for user interactions

Props​

PropTypeDefaultDescription
rowsnumber2Number of rows in the layout.
columnsnumber2Number of columns in each row.
childrenReactNode[][]-Bi-dimensional array of child components.

Example Usage​

import { AdvancedFlexPanels } from "@nomana-it/liberty-core"

export const AdvancedFlexPanelsExample = () => {
  return (
    <AdvancedFlexPanels rows={2} columns={2}>
      {[
        [
          <div style={{ padding: "20px", background: "#0044cc", color: "white", borderRadius: "8px" }}>Panel 1</div>,
          <div style={{ padding: "20px", background: "#3366ff", color: "white", borderRadius: "8px" }}>Panel 2</div>,
        ],
        [
          <div style={{ padding: "20px", background: "#5588ff", color: "white", borderRadius: "8px" }}>Panel 3</div>,
          <div style={{ padding: "20px", background: "#77aaff", color: "white", borderRadius: "8px" }}>Panel 4</div>,
        ],
      ]}
    </AdvancedFlexPanels>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core