Layout
14 posts tagged with "Layout"
.back-header
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"
.back-header $variable
.back-header !set:icon "text"
.back-header !set:icon $variable
.back-header +imagetag !set:icon "text"
.back-header +imagetag !set:icon $variable
Valid sizes
Examples
// Basic Usage
.back-header "title"
// Using Variables
// Display dynamic content from variables
.back-header $title
.bottom-panel
The .bottom-panel action displays a bottom panel. It belongs to the overlays category within the layout area.
Action Syntax
.bottom-panel [file]
Valid sizes
Examples
// Basic Usage
.bottom-panel [block]
.fixed-footer
The .fixed-footer action Creates a footer that stays visible during page changes. It belongs to the footers category within the layout area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.fixed-footer
.footer
The .footer action Creates a footer at the bottom of your app. It belongs to the footers category within the layout area.
Action Syntax
.footer "text"
.footer $variable
Valid sizes
Examples
// Basic Usage
.footer "Footer"
// Using Variables
// Display dynamic content from variables
.footer $title
.footer-nav
The .footer-nav action Adds clickable navigation items to your footer. It belongs to the footers category within the layout area.
Action Syntax
.footer-nav !set:icon [file]
.footer-nav +imagetag [file]
.footer-nav "text" [file]
.footer-nav [file]
.footer-nav !set:icon "text" [file]
.footer-nav +imagetag "text" [file]
Valid sizes
Examples
// Basic Usage
.footer-nav !icon [block]
.full-panel
The .full-panel action displays a full screen panel. It belongs to the overlays category within the layout area.
Action Syntax
.full-panel [file]
Valid sizes
Examples
// Basic Usage
.full-panel [block]
.header
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"
.header !set:icon "text"
Valid sizes
Modifiers
link
The .header action supports the link modifier.
Examples
// Basic Usage
.header "Awesome"
.image-header
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"
.image-header +imagetag $variable
.image-header +imagetag !set:icon "text"
.image-header +imagetag !set:icon $variable
.image-header +imagetag "text" [file]
.image-header +imagetag $variable [file]
.image-header +imagetag !set:icon "text" [file]
.image-header +imagetag !set:icon $variable [file]
Valid sizes
Styles
.back
inserts a back nav icon element on left
.left-panel
The .left-panel action displays a left panel. It belongs to the overlays category within the layout area.
Action Syntax
.left-panel [file]
Valid sizes
Examples
// Basic Usage
.left-panel [block]
.right-panel
The .right-panel action displays a right panel. It belongs to the overlays category within the layout area.
Action Syntax
.right-panel [file]
Valid sizes
Examples
// Basic Usage
.right-panel [block]
.row
The .row action a row element: children will appear underneath. It belongs to the rows category within the layout area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Styles
.wrapped
wraps row
.row.wrapped "example text"
.scroll
make row a scroller
.row.scroll "example text"
Modifiers
augmentable
The .row action supports the augmentable modifier.
Examples
// Basic Usage
.row
// With Styles
// Apply the .wrapped style modifier
.row.wrapped "example text"
.stack
The .stack action a general stack element to add vertical children to. It belongs to the stacks category within the layout area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Styles
.rounded
makes the stack rounded
.stack.rounded "example text"
Examples
// Basic Usage
.stack
// With Styles
// Apply the .rounded style modifier
.stack.rounded "example text"
.top-left
The .top-left action .stack positioned in top left. It belongs to the stacks category within the layout area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.top-left
.top-panel
The .top-panel action displays a top panel. It belongs to the overlays category within the layout area.
Action Syntax
.top-panel [file]
Valid sizes
Examples
// Basic Usage
.top-panel [block]