Resizable Panel

Resizable Panel

ResizablePanel Layout Component

The ResizablePanel layout screen element is a versatile tool designed for creating dynamic, resizable panels within user interfaces. It allows developers to implement a panel that can adjust its size interactively, providing flexibility in how content is presented and interacted with on the screen. This component is particularly useful in applications requiring adjustable layouts to accommodate different types of content or user preferences.

Features
  1. Adjustable Orientation: The panel can be oriented horizontally or vertically, accommodating different layout designs and content types.
  2. Resizable: Users can resize the panel interactively, allowing for a customizable view of the content.
  3. Customizable Handle: The resizing handle can be positioned on the left, right, top, or bottom of the panel, giving control over how users interact with the resizing functionality.
  4. Dynamic Size Limits: Developers can set minimum and maximum sizes to ensure the panel remains within desirable dimensions.
  5. Toggleable Visibility: A hotkey can be defined to toggle the visibility of the panel, enhancing user interaction and accessibility.

image-20240613-175922.png

 

Editable Properties
  1. Axis: Changes the orientation of the resizable panel. Defaults to “Vertical”.
  2. Handle Orientation: Changes the direction the panel will open. Defaults to “Right” but when the Axis is changed to “Horizontal” it defaults to “Top”
  3. Default Size: Sets the initial size (width or height, depending on orientation) of the panel.
  4. Toggle HotKey: Defines a keyboard shortcut that toggles the visibility of the panel. Example being CTRL+1
  5. Max Size: Specifies the maximum size the panel can be resized to.
  6. Min Size: Specifies the minimum size the panel can be resized to, ensuring that it does not become too small to be functional or visible.

    • Related Articles

    • Interaction

      Screen Elements in the Interaction category provide quick components that allow the user to interact with the screen.

    • Screen Designer Layout

      Toolbox Tabs The toolbox tabs are on the right-hand side of the screen designer which includes Elements tab, Properties tab, Layers Tab and the Tabs. Elements Tab It houses all of the available screen elements that you can add to your screen. You can ...

    • Layout

      In the context of Fuuz screen design, a "layout" component refers to a fundamental and foundational element used to structure and organize the visual arrangement of user interface elements within a web page or screen. Layout components in Fuuz screen ...

    • Screen Widget

      A Screen Widget is a screen element that allows you to add screens saved as Screen Widgets to a new screen. Use A Screen Widget Element The very first thing you will want to do is build a screen in the Screen Designer and then make sure to either go ...

    • Screen Designer Terminology

      This is where we can provide a “dictionary” of common terminology a user might encounter while navigating the interface, reading our documentation, or discussing the designer. The goal is to provide a place they can go if they see or hear a phrase ...