Allcancode Platform v5
  • Introduction
  • Getting started
  • Managing projects
    • The list of projects
    • Creating a project
    • Sharing projects with teams
    • Basic project settings
  • Creating UI layouts
    • The container
    • Basic components
    • Creating a component
    • Working with layout properties
    • Working with styling properties
    • Building responsive layouts
  • Writing frontend logic
    • Introducing Blockly
    • Handling data
      • Session
      • Variable
    • Binding inputs to data
    • Binding text to data
    • Visualizing a list
    • Handling events
    • Navigating between pages/screens
    • Sharing data between pages/screens/components
    • Using native components
    • Creating native components
    • Creating a library of functions
  • Creating a backend
    • Defining endpoints
    • Creating a library of backend functions
  • Testing and debugging
    • Previewing a web application
    • Previewing a mobile app
    • The build log
    • The debug panel
  • How-to Guides
    • Sync code with git
      • Sync with GitHub
      • Sync with Gitlab
      • Sync with Bitbucket
    • Publish web applications
      • Publish web apps to Vercel
      • Publish web apps to Netlify
    • Publish mobiles apps
      • Publish mobile apps to stores
      • Publish mobile apps to Expo Go
      • mobile app with Expo
    • Implementing authentication
    • Implementing authorization
    • Supporting multilingual UIs
  • Release Notes
    • Release notes
Powered by GitBook
On this page

Was this helpful?

  1. Creating UI layouts

The container

PreviousBasic project settingsNextBasic components

Last updated 1 year ago

Was this helpful?

The container is the fundamental building block of user interfaces. It is a UI component that can... contain other UI components, including additional... containers.

In React, the container is theHTML element, whereas in React Native, it is the component.

The following screenshot shows a combination of containers with other components to produce a specific layout.

A common practice is to start thinking of containers once presented with a new UI design to create the required space for other essential components, such as input fields and buttons. In the above example:

  • Container 2 contains an image and a text component

  • Container 3 contains input fields and an image acting as a button

  • Container 1 puts Container 3 under Container 2

There is a set of attributes that define how a container should lay out its contents or "children" as we call them in which case the container acts as their "parent." Additionally, children can, to some extent, override the rules of their parent. A presentation of those attributes is available in the following sections.

<div>
<View>