ui
284 actions in this area
Sets:
acknowledgement | animation | appicons | avatars | background | barcodes | browser | buttons | cards | chips | color | components | dividers | fields | fonts | grid | html | ico | icons | iframe | images | inline | keyboard | lists | loading | marquee | menus | modifier | numbers | panels | paragraph | position | progress | rhappsody | search | settings | shift | social | spacing | specialfx | status | styles | tablefn | text | validate | view
acknowledgement
animation
animate
Action
applies a named CSS animation keyframe to an element
fadein
Action
fades element in
fadeout
Action
fades an element in
hide
Action
hide specified element
pulse
Action
pulses an element (subtle scale animation for attention)
scalein
Action
scales element in (grows from smaller size)
scaleout
Action
scales element out (shrinks to smaller size)
shake
Action
shakes an element (error feedback animation)
show
Action
shows a hidden ui element
slidein
Action
slides element into view from specified direction
slideout
Action
slides element out of view to specified direction
spin
Action
spins/rotates an element continuously or once
appicons
avatars
.avatar
Element
Versatile avatar element supporting images, icons, and in...
.dicebear-avatar
Element
Avatar using Dicebear API with various style sets
.icon-avatar
Element
Avatar with icon content
.image-avatar
Element
Avatar with image from app registry, variable, or URL
.initials-avatar
Element
Avatar with initials extracted from text
background
barcodes
browser
buttons
.back-button
Element
displays a back button for navigation
.busy-button
Element
a button with a busy indicator
.button
Element
Creates a clickable button element
.button-bar
Element
Groups multiple buttons together in a horizontal bar layout
.circle-button
Element
a circular button
.continue-button
Element
a button that continues an app in wait state
.icon-button
Element
this is an icon button
.nav-button
Element
basic mobile navigation button with icon and a label
cards
chips
.date-chip
Element
Calendar-style date chip showing month and day in a compa...
.date-chip-range
Element
Display a range of date chips in a responsive grid layout
.day-chip
Element
Day chip showing weekday name and day number (no month)
.statistic-chip
Element
Display a statistic value with label in a compact chip fo...
color
.color-palette
Element
displays 12 shades of a color family palette
.color-swatch
Element
displays one to three color swatches
color
Action
defines a color or alias
dynamic-color-theme
Action
sets a dynamic color theme from an image or base color
list-color-palettes
Action
lists color palette names
list-colors
Action
returns a list of rhappsody colors
set-brand-color
Action
sets the brand color
components
dividers
.arrow-divider
Element
Arrow/chevron decorative divider (fixed to viewport by de...
.banner-divider
Element
displays an edge to edge colored bar with centered text t...
.book-divider
Element
Open book decorative divider (fixed to viewport by default)
.curve-divider
Element
Smooth curved decorative divider (fixed to viewport by de...
.divider
Element
creates a horizontal divider line with optional label
.divider-bar
Element
displays an edge to edge colored bar with centered text t...
.multilayer-divider
Element
Multiple stacked waves decorative divider (fixed to viewp...
.shape-divider
Element
shape divider
.tilt-divider
Element
Diagonal slanted decorative divider (fixed to viewport by...
.triangle-divider
Element
Triangle-peaked decorative divider (fixed to viewport by ...
.wave-divider
Element
Wave-shaped decorative divider (absolute positioned by de...
.zigzag-divider
Element
Zigzag pattern decorative divider (fixed to viewport by d...
fields
.checkbox-field
Element
Creates a checkbox input with a clickable label
.fieldset
Element
Groups related form fields together with optional label
.password-field
Element
Creates a password input field with hidden text
.radio-field
Element
Creates a radio button input with selectable options
.select-field
Element
Creates a dropdown selection field with multiple options
.text-field
Element
Creates a single-line text input field
.textbox-field
Element
Creates a multi-line text input area for longer content
fonts
grid
html
.a
Element
Creates a clickable link that navigates to web pages
.btn
Element
Creates a clickable button that can trigger actions
.details
Element
Creates an expandable details section with collapsible co...
.dialog
Element
Creates a modal dialog popup for user interaction
.div
Element
Creates a flexible container for organizing content
.hr
Element
Creates a horizontal line to separate content sections
.iframe
Element
Embeds external web pages or content into your app
.img
Element
Displays images from web urls or your media collection
.input
Element
Creates a text input field for user data entry
.span
Element
Creates inline text elements for styling and formatting
.textarea
Element
Creates a multi-line text input area for longer text
ico
icons
iframe
images
.10x1-image
Element
an image with a 10x1 aspect ratio (banner!)
.12x1-image
Element
an image with a 12x1 aspect ratio (mega banner!)
.16x9-image
Element
an image with a 16x9 aspect ratio
.1x1-image
Element
an image with a 1x1 aspect ratio (square!)
.1x2-image
Element
an image with a 1x2 aspect ratio (tall!)
.1x3-image
Element
an image with a 1x3 aspect ratio (very tall!)
.1x4-image
Element
an image with a 1x4 aspect ratio (extremely tall!)
.1x6-image
Element
an image with a 1x6 aspect ratio (super tall!)
.1x8-image
Element
an image with a 1x8 aspect ratio (ultra tall!)
.2x1-image
Element
an image with a 2x1 aspect ratio (wide!)
.2x3-image
Element
an image with a 2x3 aspect ratio (portrait!)
.3x1-image
Element
an image with a 3x1 aspect ratio (very wide!)
.3x2-image
Element
an image with a 3x2 aspect ratio (landscape!)
.4x1-image
Element
an image with a 4x1 aspect ratio (extremely wide!)
.4x3-image
Element
an image with a 4x3 aspect ratio (classic!)
.4x5-image
Element
an image with a 4x5 aspect ratio (standard print!)
.5x4-image
Element
an image with a 5x4 aspect ratio (photo print!)
.6x1-image
Element
an image with a 6x1 aspect ratio (super wide!)
.6x9-image
Element
an image with a 6x9 aspect ratio (postcard!)
.8x1-image
Element
an image with a 8x1 aspect ratio (ultra wide!)
.circle-image
Element
small circlular image
.golden-image
Element
an image with golden ratio aspect (1.618:1!)
.image
Element
base image with its original aspect ratio
.image-button
Element
an image button
.image-title
Element
displays title text on top of an image
+tint
Action
Applies a color tint overlay effect to images
app-image
Action
Saves images locally on the device for offline use
clear-image
Action
Removes a saved image from your device's local storage
clear-images
Action
Removes all cached images from local device storage
delete-app-image
Action
Removes an image from your app's image collection
image
Action
Loads an image from a URL and stores it for future use
list-app-images
Action
Gets a list of images available in your app
list-images
Function
lists images saved in IDB using the set-image action
resize-image
Action
Resizes images to specific dimensions for web or email use
save-app-image
Action
saves an app image
set-image
Action
sets/defines an image tag
upload-app-image
Action
Uploads an image for use within your app interface
inline
.inline-badge
Element
Inline badge/tag that renders within parent text element
.inline-button
Element
Inline button that renders within parent text element
.inline-link
Element
Inline link that renders within parent text element - nav...
.inline-text
Element
Inline text that renders within parent text element, inhe...
.inset-aside
Element
Floated aside block that text wraps around, for side note...
.inset-image
Element
Floated image with text wrapping around it
keyboard
.hotkey
Action
Display keyboard shortcut visually and register keypress ...
disable-keypress
Action
Suspend all keyboard shortcut handlers
enable-keypress
Action
Resume all keyboard shortcut handlers
enable-shell-shortcut
Action
enable the shell shortcut key
hide-hotkeys
Action
Hide all keyboard hotkey indicators without layout shift
keypress
Action
Handle arbitrary keypress events
show-hotkeys
Action
Show all keyboard hotkey indicators
lists
loading
.loading-bar
Element
Animated loading bar at the top of the screen (YouTube-st...
.loading-dots
Element
Animated loading dots indicator
.loading-overlay
Element
Loading overlay with spinner
.placeholder-circle
Element
Animated circle placeholder for avatars and icons
.placeholder-line
Element
Animated line placeholder for loading text
.placeholder-rect
Element
Animated rectangle placeholder for images and cards
.spinner
Element
shows a spinner icon
hide-loading
Action
Hide all active loading indicators
marquee
modifier
.alt
Element
sets the alt text modifier for an element
.change
Element
sets a change event modifier
.click
Element
sets a click modifier
.double-click
Element
sets a double-click modifier
.enter
Element
sets a enter key modifier for an input field
.escape
Element
sets an Escape key modifier
.goto
Element
sets a goto modifier
.gradient
Element
adds a gradient effect to an element
.help
Element
sets a help text modifier for an element
.hide
Element
hides the element after a previous modifier action
.hover-over
Element
sets a hover over modifier
.link
Element
sets a link modifier
.navto
Element
sets a navto modifier
.overlay
Element
overlays text or other element on top of another (usually...
.placeholder
Element
sets a placeholder for an input element
.right-click
Element
sets a right-click modifier
.run
Element
sets a run modifier
.shadow
Element
Adds drop shadow effect to the preceding element
.tint
Element
tints an image with the specified color
.tiptext
Element
sets tooltip text modifier for an element
.wait
Element
waits on previous modifier action before continuing
.when-load-complete
Element
modifier for when load complete event
numbers
panels
.bottom-panel
Element
Slide-up panel from bottom of screen
.left-panel
Element
Slide-in panel from left of screen
.popup
Element
Popup overlay with close functionality and backdrop
.right-panel
Element
Slide-in panel from right of screen
.screen
Element
Basic screen container with z-index and color support
.splash
Element
Splash screen with auto-dismiss and transitions
.top-panel
Element
Slide-down panel from top of screen
clear-screen
Action
Clear the app UI screen
close-panel
Action
Close and remove the current panel with animation
hide-panel
Action
Hide the current panel with animation (keeps in DOM)
hide-splash-screen
Action
Hide the active splash screen if present
show-panel
Action
Show a hidden panel with animation
paragraph
position
.bottom
Element
Fixed position container at bottom-center of viewport
.bottom-left
Element
Fixed position container at bottom-left of viewport
.bottom-right
Element
Fixed position container at bottom-right of viewport
.left
Element
Fixed position container at middle-left of viewport
.right
Element
Fixed position container at middle-right of viewport
.top
Element
Fixed position container at top-center of viewport
.top-left
Element
Fixed position container at top-left of viewport
.top-right
Element
Fixed position container at top-right of viewport
clear-position
Action
Remove a position container from the DOM
hide-position
Action
Hide a position container (display:none but keep in DOM)
show-position
Action
Show a hidden position container
progress
.hide-in-progress
Element
hides the .show-in-progess element
.progress-bar
Element
Display a horizontal progress bar with customizable appea...
.progress-circle
Element
...
.progress-circle-with-value
Element
shows a progress circle with percent complete value in ce...
.show-in-progress
Element
shows full screen in progress overlay spinner with an opt...
rhappsody
.rhappsody-logo
Element
shows rhappsody logo
rhappsody-admin-auth
Action
Set Rhappsody admin authentication credential (encrypted ...
rhappsody-api-key
Action
Set Rhappsody platform API key (encrypted at compile time)
rhappsody-app-auth
Action
Set Rhappsody app authentication credential (encrypted at...
rhappsody-app-manager-auth
Action
Set Rhappsody app manager authentication credential (encr...
rhappsody-app-user-auth
Action
Set Rhappsody app user authentication credential (encrypt...
rhappsody-instance
Action
Set Rhappsody platform instance name
rhappsody-owner-auth
Action
Set Rhappsody owner authentication credential (encrypted ...
search
settings
shift
social
.bluesky
Element
shows a bluesky icon link
.facebook
Element
shows a facebook icon link
.github
Element
shows a github icon link
.instagram
Element
shows an instagram icon link
.linkedin
Element
shows a linkedin icon link
.twitter
Element
shows a twitter/X icon link
.youtube
Element
shows a youtube icon link
spacing
specialfx
status
styles
tablefn
count-rows
Action
Count the number of rows in a table
create-table
Action
creates a new table
duplicate-rows
Action
Find rows with duplicate values in a column
each-row
Action
Get array of row indices for iteration
fill-column
Action
Fills all rows in a table column with the same value
has-row
Action
Check if a row exists at a specific index
merge-tables
Action
Merge multiple tables into one by combining rows
sort-table
Action
sorts your table data by any column you choose
unique-rows
Action
Get unique rows based on column value, removing duplicates
text
.aside
Element
a stand alone block of text with additional explanation
.callout
Element
displays large, bold, centered text for marketing callouts
.fineprint
Element
displays teeny-tiny text!
.handwriting
Element
simulates hand or script written text (cursive)
.signature
Element
text that mimics a handwritten signature
.tagline
Element
a huge large tagline. Keep it under 10 words. Shorter is ...
.teaser-text
Element
displays text with a fade-out effect for content preview ...
.text
Element
displays text in the UI
.title
Element
a text title
validate
.validate-email
Element
validates input is valid email
ensure-email
Action
Checks that the input field contains a valid email address
is-array
Action
Checks if a value is an array type
is-boolean
Action
Checks if a value is a boolean type
is-number
Action
Checks if a value is a number type
is-object
Action
Checks if a value is an object type
is-string
Action
Checks if a value is a string type
is-valid-email
Action
Checks if a value follows valid email format rules
is-valid-phone
Action
Checks if a value looks like a valid phone number