The View is the most basic building block in Shipcode, functioning similarly to a <div> in web design. It is the core, versatile container component you use to structure complex Layouts, such as creating rows and columns, by wrapping other components.
View components can be styled extensively with properties for borders, background colors, padding, margins, and more.
Containment and Usage
A View can contain any number and type of components, including other Views.
⚠️⚠️⚠️ Warning ⚠️⚠️⚠️
Be tactical with how you use your Views. Using too many View components in your application can negatively impact the performance of your application.
💡💡💡 Tip 💡💡💡
(Placing Components): Several methods are available for placing components inside a View:
- Dragging a component from the Components Panel directly into a View on the Canvas.
- Dragging an existing component on the Canvas into a View.
- Opening the Structure Panel and dragging a component into a View.
📍📍📍 Note 📍📍📍
If you need content within your component to scroll independently of the parent Layout, you should use the Scroll View component instead.
Available Properties
- Safe (Settings Panel): When enabled, the contents of the View will be restricted to the safe area of the screen. When rendered on a mobile device, this prevents content from appearing behind notches, camera cutouts, or similar hardware elements.
📍📍📍 Note 📍📍📍
If the Layout that the component lives in already has the Safe toggle enabled, this setting on the View will have no effect because the entire page will already be constrained within the safe area.