Getting started with frames
Learn how to use frames to organize content in an app.
Frames are special containers that enable you to divide and manipulate the app viewport in different ways.
All apps contain a Main frame, which takes up the entire canvas area by default. Additional frames include:
| Frame | Description |
|---|---|
| Header | The Header frame appears at the top of the canvas, above the Main frame, and is the full width of the app. |
| Sidebar | The Sidebar frame appears to the left of the Main frame and below the Header frame (if enabled). |
| Split Pane | The Split Pane frame appears to the left or right of the Main frame. Both the Main and Split Pane frames take up a combined width of 100%. As you adjust the width of Split Pane, the Main frame width changes. |
| Modal | The Modal frame appears as an overlay when visible. |
| Drawer | The Drawer frame appears as an overlay that slides into view from the side of the app. |
The following demo shows an app that utilizes all types of frames:
The Header and Sidebar frames are globally scoped and persist across all pages. Any components within these frames inherit this behavior and are globally scoped. All other frames (e.g., Modal and Drawer) are page-scoped and only available within the app in which they reside. Find more information about scopes in the Quickstart.
Features
- Optional headers and footers for certain frames.
- The ability to group related components together within a frame.
- Event handlers and other opportunities for interaction.
- Customizeable styles.
Specify content options
The Component tree tab of the IDE contains two sections: Frames and Components. Select a frame to view the components that are nested inside it.
Some frames (Sidebar, Modal and Drawer) support a header and footer within the frame itself. Enable these using the Add-ons setting in Content section of the Inspector.
In the following image, you can see all the components that are nested within the Header and Body of the Drawer component. Note that the Header setting is enabled in the Inspector on the right side of the screen.
Main, Header, and Split Frame have no settings in the Content section of the Inspector because all settings are applied at the component level.
Configure user interaction
Event handlers which listen for and handle interactions with your components. You configure these in the Interaction section of the Inspector.
The Show and Hide events enable you to trigger actions when a user opens or closes a frame. For example, in the following screenshot, a Hide event handler turns off the Modal toggle in the Switch Group by setting the value to {{ switchGroup1.value.filter(item => item !== 'modal') }}.
You can also close a Modal or Drawer using the Close when clicking outside or Close when pressing Escape settings.
Customize appearance
You can customize the presentation of your component in the Spacing and Appearance sections of the Inspector. The settings available in the Appearance section depend on the type of component you use.
All components have a Hidden setting, which you can dynamically control with a truthy value that evaluates to true or false. You can also control the hidden property for a component using the .setHidden() method from event handlers and JavaScript queries.
You can also create custom style rules using the Styles setting. Each component has different styles that you can configure, but common ones include colors, fonts, and text styles. Use app-level or organization-level themes to set these styles across all components.
The following settings are useful for customizing frames:
- Show overlay: Show an overlay behind a Drawer or Modal component that darkens the rest of the app. Turn off this setting to be able to drag content from Main to a Drawer or Modal frame.
- Expand content to fit: Removes all padding and margin, and causes the frame to take up the entire screen. Can only be used when there is a single component in the frame.
- Hidden: A truthy value that shows the frame when set to
true. The.setHiddenmethod is also useful for dynamically hiding a frame. - Styles: Updates the style of the frame as a whole.
- Nested styles: Applies style changes across all components inside the frame, but not to the frame itself.