Section Module

The Section module in PAP is a foundational tool used to create structured containers in app layouts. It serves as a flexible framework for arranging, styling, and controlling content blocks. With control over layout, spacing, background, borders, size, and scrolling, the Section module ensures structured, responsive, and customizable designs.

Written By Yasaman Shad

Last updated 5 months ago

Accessing the Section Module

Open an app in PAP.
Click the Add Items button in the top navigation bar or use the “+” signs on the canvas.
In the left-side New Items pane, locate the Section module under the General category.
Drag it onto your app canvas.
Once placed, click the section to open the Section Properties Pane on the left-hand side.

Section Properties and Settings

1. Layout

Control the flow and alignment of content inside the section.

Direction: Vertical (top to bottom) or Horizontal (left to right).
Alignment: Horizontal (Left, Center, Right) and Vertical (Top, Center, Bottom).
Spacing: Preset options for content distribution (None, Even, Equal).

Steps to Use:

Select the section.
In the Properties Pane, set the direction, alignment, and spacing.

2. Overflow (Scrolling Behavior)

Manage how content behaves when it exceeds the section’s size.

Main Scroll: on/off vertical scrolling.
Cross Scroll: on/off horizontal scrolling.

Steps to Use:

Select the section.
In the Properties Pane, toggle the Main Scroll and Cross Scroll options.

3. Section Size and Scale

Define how the section fits within the app layout.

Auto: Adjusts size automatically based on content.
Flex: Proportional sizing relative to other elements (value range: 1–99).
Custom: Define exact Width and Height values.

Steps to Use:

Select the section.
Scroll to Section Size in the Properties Pane.
Choose Auto, Flex, or Custom and enter values as needed.

4. Spacing

Adjust the inner and outer spacing of the section.

Inner (Padding): Space inside the section.
Outer (Margin): Space outside the section.

5. Background

Set the section’s background fill.

None: Transparent.
Solid: Choose or customise a colour.
Gradient: Apply a gradient background.
Image: Upload an image.

6. Border

Style the edges of the section.

Type: None, Solid, or Dashed.
Adjust: Border width, colour, and radius.

Design Notes

Sections act as containers for grouping related content.
Use Flex for consistent layouts across different screen sizes.
Overflow settings help manage scrolling for sections with large amounts of content.

Use Cases

Create clean, structured layouts by grouping related content into sections.
Customize spacing, alignment, and background to achieve professional-looking app designs.
Control visibility by hiding or showing sections during the design or testing phase.
Adjust flow, sizing, and responsiveness to ensure sections adapt seamlessly across devices.