Thunkable Docs
Click here to build your own apps!
Drag and Drop docs
Snap to Place docs
Search…
Drag and Drop
👋
Welcome to Thunkable
👶
Getting Started
Signing In
Tutorials
Live Test your App
Your Thunkable Projects Page
🆕
Create New Project
Project Settings
Template Gallery
Assets
Figma Integration
🖼
Thunkable Sample Projects
🛠️ Components and Features
🔘
UI Components
Button
Label
Image
Text Input
List Viewer
Group
Web Viewer
Switch
Slider
Checkbox
Map
Animation by Lottie
Video
Loading Icon
Date Input
Time Input
PDF Reader
Rating
📊
Data Viewers
Data Viewer List
Data Viewer Grid
Data Sources
📐
Screens and Navigators
Top Tab Navigator
Bottom Tab Navigator
Drawer Navigator
Stack Navigator
Screen
💲
Monetization
Ads by AdMob
🎮
Gaming
Canvas
Sprites
Sprite Gallery
Canvas Label
🤖
Gaming Blocks 🎮
Events
Motion
Looks
Direction
Sensing
Add & Remove
Stage
Canvas Label
🤖
Core Blocks
Control
Logic
Math
Text
Lists
Color
Objects
Device
Variables
Functions
🌐
App Features
Gyroscope
Magnetometer
Accelerometer
Location Sensor
Speech
Sound
Share
Camera
Files
Email Sign In by Firebase
Push Notifications by One Signal
Alert
Timer
🚀
Advanced App Features
Web API
In-App Purchase
Bluetooth Low Energy
Assistant by Dialogflow
"Any Component" Blocks
🖥️ App Services & Emulators
🔒
App Data Privacy
➕
Duplicate your Project
📥
Download
📤
Share
📱
Publish
Publish to App Store (iOS)
Publish to Play Store (Android) with AAB
Publish as a Web App (PRO)
Generate Screenshots
🔎
Troubleshooting
💾
Managing Storage
📝
Bugs and Feature Requests
Powered By
GitBook
Group
A Group is a container component.
You can place
User Interface
components inside a Group to make changing the appearance of your app easier.
Add Components to Group
To add components to a Group, simply drag and drop the components inside the Group.
You will see the components you added to the Group are now nestled inside the Group in the component tree.
Moving Groups in Your Project
When a group that contains UI Component(s) is moved, its content are moved with it as a unit.
This makes it easier to design complex layouts.
Properties
Layout
Property
Description
Data Type
Height
Height of Group in pixels
Number
Width
Width of Group in pixels
Number
X
Position of top left corner of Group on X-axis
Number
Y
Position of top left corner of Group on Y-axis
Number
Image
Property
Description
Data Type
Picture
The image file to be shown in the Image component
PNG, JPG, GIF, SVG, etc. Can also use URL that ends in file extension (eg
https://thunkable.com/static/media/logo.ba96eb83.png
)
Picture Resize Mode
Set how picture is shown if the file and the Image component have different dimensions/aspect ratio
Select from list
[cover, contain, stretch, repeat, center]
Style
Property
Description
Data Type
Border Width
Width of Button's border in pixels
Number
Border Radius
Radius of corners of Button's border in pixels
Number
Border Color
Color of Button's border
Color
Border Style
Style of Button's border
Select from list
[solid, dotted, dashed]
Shadow Color
Color of Button's shadow
Color
Shadow Opacity
Opacity of Button's shadow
Number between 0 and 100
Shadow Radius
Radius of corners of Button's shadow in pixels
Number
Shadow Offset
How far Button's shadow should be offset, in Height and Width, in pixels
Number
Blocks
Events
You can use the following blocks to listen for when a specific event occurs
Click
Performs an action when the user taps the Group.
Properties
Set and get the
properties
of the Group.
Background Color
Set and get the Background Color of the Group.
Background Picture
Set and get the Background Picture of the Group.
Background Picture Resize Mode
Set and get the Background Picture Resize Mode of the Group.
Computed Height
Get the height of the of the Group as it appears in-screen in pixels.
Visible
Set and get the Visible property of the Group.
Computed Width
Get the width of the of the Group as it appears in-screen in pixels.
Previous
List Viewer
Next
Web Viewer
Last modified
12d ago
Export as PDF
Copy link
Contents
Add Components to Group
Moving Groups in Your Project
Properties
Layout
Image
Style
Blocks
Events
Properties