Layout

The layout options allow developers to configure the layout of the builder’s tool panels, ensuring that the user interface can be customized to fit the needs and preferences of your end-users.

These options give you control over where the tool panel is positioned and whether it can be collapsed, providing flexibility in how the builder interface is structured.

Tools Position

By default, the tool panel is positioned on the right side of the builder. However, you can change the position of the panel to better fit your layout needs.

Setting Panel Position

You can control the position of the tool panel using the dock option. The tool panel can be docked either on the right or the left side of the builder interface.

Docking Options

• right (default)
• left

Example of docking the panel on the right (default):

unlayer.init({
  appearance: {
    panels: {
      tools: {
        dock: 'right'
      }
    }
  }
});

To dock the panel on the left:

unlayer.init({
  appearance: {
    panels: {
      tools: {
        dock: 'left'
      }
    }
  }
});

Collapsible Panel

This feature allows you to enable or disable the ability to collapse the tool panel. By default, the tool panel is collapsible, meaning users can hide or show the panel as needed to create more space while designing.

Enable or Disable Collapsing

You can control whether the tool panel is collapsible using the collapsible option. When set tofalse, the tool panel will remain fixed and cannot be collapsed.

Example of disabling collapsibility:

unlayer.init({
  appearance: {
    panels: {
      tools: {
        collapsible: false
      }
    }
  }
});

Best Practices

• User Flexibility: Consider keeping the collapsible feature enabled (collapsible: true) to allow users to create more space while designing, especially on smaller screens.
• Docking Position: Position the tool panel on the side that best fits your application’s layout and design. The default right-side docking works well for most users, but left-docking may be preferable depending on the design flow or user preferences.
• Responsive Design: When positioning the panel or making it collapsible, ensure that the layout works well across different devices.

By customizing the layout options, developers can create a more user-friendly and adaptable interface for the builder, providing flexibility in how the tool panel is displayed and used.