Headers

5 posts tagged with "Headers"

.app-navbar

element

The .app-navbar action standard bottom app nav bar. It belongs to the navbars category within the ui area.

Action Syntax

.app-navbar !set:icon "text" [file]

An icon in format !set:name followed by A quoted text string followed by A file reference

.app-navbar !set:icon [file]

An icon in format !set:name followed by A file reference

.app-navbar "text" [file]

A quoted text string followed by A file reference

Valid sizes

tiny

small

medium

large

extra

Examples

// Basic Usage
.app-navbar !icon "label" [block]

Action code: 1358104890

Version: 0.6.4-0

Last updated: 2025-06-13

.back-header

headers

element

The .back-header action Header with back button for navigation. It belongs to the headers category within the layout area.

Action Syntax

.back-header "text"

A quoted text string

.back-header $variable

A variable name starting with $

.back-header !set:icon "text"

An icon in format !set:name followed by A quoted text string

.back-header !set:icon $variable

An icon in format !set:name followed by A variable name starting with $

.back-header +imagetag !set:icon "text"

An image tag starting with + followed by An icon in format !set:name followed by A quoted text string

.back-header +imagetag !set:icon $variable

An image tag starting with + followed by An icon in format !set:name followed by A variable name starting with $

Valid sizes

tiny

small

medium

large

extra

Examples

// Basic Usage
.back-header "title"

// Using Variables
// Display dynamic content from variables
.back-header $title

Action code: 3747312468

Version: 0.6.4-2

Last updated: 2025-06-13

.header

headers

element

The .header action Creates a header bar at the top of your app. It belongs to the headers category within the layout area.

Action Syntax

.header "text"

A quoted text string

.header !set:icon "text"

An icon in format !set:name followed by A quoted text string

Valid sizes

tiny

small

medium

large

extra

Modifiers

`link`

The .header action supports the link modifier.

Examples

// Basic Usage
.header "Awesome"

Action code: 2133981202

Version: 0.6.4-3

Last updated: 2025-06-13

.image-header

headers

element

The .image-header action Header with background image and overlay text. It belongs to the headers category within the layout area.

Action Syntax

.image-header +imagetag "text"

An image tag starting with + followed by A quoted text string

.image-header +imagetag $variable

An image tag starting with + followed by A variable name starting with $

.image-header +imagetag !set:icon "text"

An image tag starting with + followed by An icon in format !set:name followed by A quoted text string

.image-header +imagetag !set:icon $variable

An image tag starting with + followed by An icon in format !set:name followed by A variable name starting with $

.image-header +imagetag "text" [file]

An image tag starting with + followed by A quoted text string followed by A file reference

.image-header +imagetag $variable [file]

An image tag starting with + followed by A variable name starting with $ followed by A file reference

.image-header +imagetag !set:icon "text" [file]

An image tag starting with + followed by An icon in format !set:name followed by A quoted text string followed by A file reference

.image-header +imagetag !set:icon $variable [file]

An image tag starting with + followed by An icon in format !set:name followed by A variable name starting with $ followed by A file reference

Valid sizes

tiny

small

medium

large

extra

Styles

`.back`

inserts a back nav icon element on left

.top-appbar

headers

element

(.appbar)

The .top-appbar action displays a standard top app bar. It belongs to the navbars category within the ui area.

Action Syntax

.top-appbar "text"

A quoted text string

.top-appbar $variable

A variable name starting with $

.top-appbar !set:icon "text"

An icon in format !set:name followed by A quoted text string

.top-appbar !set:icon $variable

An icon in format !set:name followed by A variable name starting with $

.top-appbar +imagetag "text"

An image tag starting with + followed by A quoted text string

.top-appbar +imagetag $variable

An image tag starting with + followed by A variable name starting with $

.top-appbar +imagetag "text" !set:icon

An image tag starting with + followed by A quoted text string followed by An icon in format !set:name

.top-appbar +imagetag $variable !set:icon

An image tag starting with + followed by A variable name starting with $ followed by An icon in format !set:name

Valid sizes

tiny

small

medium

large

extra

Modifiers

`goto`

The .top-appbar action supports the goto modifier.