Skip to main content

The Layout Menu in our Digisquares platform allows users to design and customize layouts for their projects efficiently. This guide provides detailed instructions on navigating and utilizing the Layout Menu.

Accessing the Layout Menu

1. Navigation to Layout Menu​

  • Open the Digisquares platform and log in to your account.
  • In the left-hand sidebar, locate and click on the UI section.
  • Under the UI section, click on Layout to open the Layout Menu.

2. Layout Menu Overview​

  • The Layout Menu displays a list of existing layouts associated with the selected project.
  • The main table shows columns for Name and Project Name, along with Actions you can perform on each layout.

Creating a New Layout

1. Starting a New Layout​

  • Click the New Layout button located at the top right corner of the Layout Menu.
  • A modal window will open, presenting options to create a new layout.

2. Selecting a Layout Template​

  • In the modal window, you have the option to start with a blank layout or choose from predefined templates.
  • The available templates are:
    • Blank: Start with a completely empty layout.
    • Standard Stack: Predefined layout with standard stack navigation.
    • Tab Navigation: Predefined layout with tab navigation.
    • Drawer Navigation: Predefined layout with drawer navigation.

3. Choosing a Blank Layout​

  • Select the Blank option by clicking on the large plus (+) icon.
  • Click the Ok button at the bottom of the modal to proceed.

Designing the New Layout

1. Entering the Layout Editor​

  • After selecting Blank and clicking Ok, you will be redirected to the layout editor page.
  • The layout editor provides various tools and components to design your layout.

2. Using the Component Panel​

  • Components: Contains various UI elements you can drag and drop into your layout.
    • Card, Tile, Floating, FloatingAction, SocialIcon, Skeleton, Searchbar, PricingCard, Overlay, Linear Progress, Icon, Header, FAB, Chip, Dialog
  • Form: Contains form elements for user inputs.
    • Form, Button, Buttongroup, Text, TextBox, Checkbox, Image, Switch, Slider, Divider
  • Display: Contains elements for displaying information.
    • Avatar, Badge, Tooltip
  • ListItem: Contains elements for creating list items.
    • ListItem, Accordion, Buttongroup, Checkbox, Chevron, Content, Input, Subtitle, Swipeable, Title
  • Feedback: Contains components for collecting user feedback.
    • Rating, AirBNB Rating

Configuring Component Properties​

  • After dragging a component into the layout, you can customize its properties using the styling panel.
    • Spacing: Adjust margin and padding for the selected component.
    • Size: Set width, height, min/max width, min/max height, ratio, and overflow settings.
    • Background: Customize the background color, width, height, position, and tile settings.
    • Box Shadows: Configure inside and outside box shadows including color, angle, distance, size, and blur.
    • Typography: Set font, color, weight, size, height, space, indent, decor, and alignment.
    • Border: Define border text decoration, color, width, and radius.
    • Layout: Adjust display, flex child settings, and alignment and order.
    • Position: Set position, float, and clear properties.

Managing Layouts

1. Editing an Existing Layout​

  • In the Layout Menu, locate the layout you want to edit.
  • Click on the Actions button and select Edit to open the layout in the editor.

2. Deleting a Layout​

  • To delete a layout, click on the Actions button and select Delete.
  • Confirm the deletion in the prompt that appears.

Tips for Using the Layout Editor

  • Preview: Use the Preview option to see how your layout will look on different devices.
  • Save: Regularly save your progress to avoid losing any changes.
  • Help: Access the help documentation or support for any assistance needed while designing your layout.