Skip to main content

The Card component for Retool Mobile

Properties​

All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

align​

The horizontal alignment of the contents.

Type string
Format Plain Text
Configurability Inspector
Allowed Values
ValueDescription
left

Left alignment.

center

Center alignment.

right

Right alignment.

Defaultleft
Examples
false"center"

collapsedIcon​

The icon that's displayed when collapsed.

Type string
Configurability Inspector
Defaultnull

collapsible​

Whether collapsible add-ons are configured.

Type boolean
Configurability Inspector
Defaultnull

cornerType​

The corner style to use.

Type string
Configurability Inspector
Allowed Values
ValueDescription
square

Square corners.

round

Rounded corners.

circle

Circular corners.

Defaultnull

elevation​

Whether items are rendered with a raised appearance.

Type string
Configurability Inspector
Allowed Values
ValueDescription
none

No elevated style.

raised

Raised elevated style.

Defaultnull

events​

A list of configured event handlers that trigger actions or queries.

Type array
Array values object
Configurability Inspector > Interaction > Event handlers
Defaultnull
Array Object Properties

event​

The event that triggers the action. Refer to the events section for details of available events for this object.

Type string
Configurability Inspector > Interaction > Event handlers > Event
Defaultnull

method​

The JavaScript method to perform when type is datasource, widget, state, or localStorage.

Type string
Configurability Inspector > Interaction > Event handlers > Edit event handler > Run script actions
Defaultnull

type​

The type of action to perform.

Type string
Configurability Inspector > Interaction > Event handlers > Edit event handler > Action
Allowed Values
ValueDescription
datasource

Control query.

widget

Control component.

script

Run script.

state

Set variable.

localStorage

Set localStorage.

util

Perform utility action (e.g., Open URL or Confetti).

Defaultnull


expandedIcon​

The icon that's displayed when expanded.

Type string
Configurability Inspector
Defaultnull

gap​

The gap between components.

Type string
Configurability Inspector
Allowed Values
ValueDescription
0
4
8
12
16
24
32
48
64
128
256
Defaultnull

hidden​

Whether this object is hidden from view.

Type boolean
Format True/False
Configurability Inspector > Appearance > Hidden
Defaultfalse
Examples
falsetrue

justify​

The horizontal alignment of the contents.

Type string
Configurability Inspector
Allowed Values
ValueDescription
left

Left alignment.

center

Center alignment.

right

Right alignment.

stretched

Justified alignment

Defaultnull

layout​

The layout of content.

Type string
Configurability Inspector
Allowed Values
ValueDescription
row

Horizontal row layout.

column

Vertical column layout.

Defaultnull

padding​

The amount of padding to render inside.

Type string
Format Plain Text
Configurability Inspector > Spacing > Padding
Allowed Values
ValueDescription
4px 8px

Normal padding.

0

No padding.

Default4px 8px
Examples
false4px 8px

showBody​

Whether to show the body.

Type boolean
Configurability Read-only
Defaultnull

showBorder​

Whether to show a border.

Type boolean
Format True/False
Configurability Inspector > Appearance > Show border
Defaultfalse
Examples
falsetrue

title​

The title text to display.

Type string
Configurability Inspector
Defaultnull

width​

The width.

Type number
Format Integer
Configurability Inspector
Defaultnull
Examples
false1280

widthGrowFactor​

Sets the width grow factor of a width item's main width size, similar to the flex-grow CSS property.

Type unknown
Configurability Read-only
Defaultnull

Methods​

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

card.setHidden()​

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

Definition
card.setHidden(hidden)
Parameters

hidden​

Whether this object is hidden from view.

Type boolean
Format True/False
Default
false
Examples
true

Examples

Hide card.

card.setHidden(true);

Unhide card.

card.setHidden(false);

Events​

Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.

EventDescription
ClickAn item is clicked or pressed.