Adalo Resources
Search…
Component Basics
An intro to using components to build screens.

Inserting Components

Components are located in the Add Panel that appears after clicking the plus button-- to insert them, click and drag into a screen.
Components are all of the elements on a screen β€” lists, buttons, text, etc.
    Drag and drop components from the Add Panel onto a screen on your Canvas.
    To copy and paste a component from one screen to another, select and copy the component, then click the Screen Title of the new screen and paste it.
    To edit a component, click on it and the left panel will open with all of the options to configure and customize the component.
    If you want to group components, click and drag to select multiple components. Then, in the left panel, click the "Make Group" button.
    If you want to arrange the order of components on a screen so that one component is above or below another, go to the Screens tab in the toolbar, and click the relevant screen to see its list of components. In that list, drag components up or down to move them closer to the front or back of the order.
    If you want a component to be fixed in place, even when the user scrolls, select the component, then in the left panel, select Edit Styles and select where you want it to be fixed. If you don't see the Edit Styles button, try making the component into a group.
    To link clicking on a component to an action or to another screen, check out our Action Basics section.
Components can range from very simple to robust with many options. Simple components like text and shapes can be combined to create your own custom designs.

All Components

    Tab Bar
    App Bar

Lists

    Simple List
    Card List
    Image List
    Avatar List
    Horizontal Card List
    Horizontal Chip List
    Custom List

Buttons

    Button
    Action Button
    Icon
    Toggle

Simple

    Text
    Image
    Eclipse
    Rectangle
    Line
    Vector
    Web View

Forms & Fields

    Form
    Text Input
    Date Picker
    Dropdown Menu
    File Picker
    Image Picker
Marketplace Components
    Map
    Calendar
    Image Slider
    Google Signin
    Multiselect Dropdown
    Star Rating
    Progress Bar
    YouTube
    AdMob Banner
    Stripe Kit
    Deck Swiper
    Plyr Video
    Chart Kit
    Audio Player
    Apple Sign-In
    Email Validator
    Slider
    Lottie
    QR Code Generator (by Knight)
    Countdown
    Randomizer
    NocoderHQ HTMLRenderer
    QR Code Scanner
    Calendar Stripe
    Stopwatch
    Signature Pad
    IAP Kit
    QR Code Generator (by Zeroqode)
    Magic Color Rectangle
    NocoderHQ Round Button
    Random Picker
    NocoderHQ Countdown
    Twitter Timeline
    URL Encode Decoder
    Switch
    Masked Form
    Markdown Renderer
    Jam Room
​
Last modified 2mo ago