Responsive Widgets (ALPHA)
Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).
Responsive Widgets are the widgets you use in a Responsive app. A Responsive app does not use a fixed grid. It arranges widgets in sections, zones, and rows, and adapts the layout to the screen width.
Responsive Widgets are separate from the classic widgets used in fixed-layout apps. Some have the same name, such as Table or Button, but their properties differ. Use the pages in this section for Responsive apps only.
How a Responsive page is laid out
- A Section is a full-width band of the page. Sections stack from top to bottom.
- A Zone is a column inside a section. A section holds up to four zones side by side. Zone widths are set in twelfths of the section width.
- Inside a zone, widgets stack in rows from top to bottom. A large widget, such as a Table or Chart, takes a row of its own.
- On small screens, zones stack on top of each other.
- Keyboard order follows reading order: sections top to bottom, zones left to right, then rows and widgets.
Widgets
Layout and containers
Section, Zone, Modal, Sheet, Card, Tabs
Text input
Input, Email Input, Password Input, Number Input, Multiline Input, Phone Input, Currency Input, Search
Selection
Select, ComboBox, MultiSelect, Tree Select, Checkbox, Checkbox Group, Radio Group, Switch, Switch Group
Pickers and ranges
Slider, Rating, ColorPicker, DatePicker, DateRangePicker
Buttons and links
Button, Icon Button, Menu Button, Inline Buttons, Toolbar Buttons, FAB, Link
Text and display
Heading, Paragraph, Markdown, Code, Divider, Badge, Avatar, TagGroup, Chip Group, KeyValue, Stats, Progress
Media
Data
Table, List, Text List, Tree, Chart, Map Chart
Capture, chat, and custom
File Upload, Signature, Code Scanner, Rich Text Editor, Chat, Custom