Guide¶

Basics¶

Take your first steps with Nitro.

Markdown¶

Use Markdown to display rich text, tables, and code.

Styling¶

Change how boxes look: colors, borders, sizing, margins, and padding.

Images¶

Display images, or use them as backgrounds or in patterns.

Layout¶

Compose and arrange boxes to lay out content and control flow.

Forms¶

Learn the basics of collecting inputs from the user.

Editing¶

Make changes to content already displayed on a page.

Popups¶

Display content in popup dialogs.

Textbox¶

Use textboxes to capture text inputs and passwords.

Spinbox¶

Use spinboxes to capture numeric inputs. A spinbox lets users incrementally adjust a value in small steps.

Checkbox¶

Use a checkbox to choose between two mutually exclusive options.

Toggle¶

Use a toggle to choose between two mutually exclusive options, with an immediate result.

Pickers¶

Use pickers to pick one or more options from several options. Buttons, checklists, dropdowns, and color pickers are all examples of pickers.

Options¶

Learn how to create options for pickers. Options can be created from strings, sequences, tuples, or dictionaries.

Buttons¶

Use buttons to allow users to trigger actions. They can be thought of as pickers that produce an immediate result when selected.

Radio Buttons¶

Use radio buttons to pick one option from a small number of options.

Use a dropdown to pick one option from a large number of options.

Use a dropdown list to pick one or more options from a large number of options.

Checklist¶

Use checkboxes to pick one or more options from a small number of options.

Table¶

Use tables to display detailed information in the form of a grid. Tables can be thought of as pickers that allow one or more rows to be selected. They are a good replacement for dropdowns and dropdown lists when each option has several displayable attributes.

Slider¶

Use sliders to allow picking a number in a given range.

Range Slider¶

Use range sliders to allow picking a numeric range within a given range.

Time Picker¶

Use a time picker to pick a time using a 12- or 24-hour clock.

Date Picker¶

Use a date picker to pick a date within a range. A date picker is a compact form of the calendar.

Calendar¶

Use a calendar to pick a date within a range. The calendar is an expanded form of a date picker.

Week Picker¶

Use a week picker to pick a week in a given range.

Month Picker¶

Use a month picker to pick a month in a given range.

Tag Picker¶

Use a tag picker to pick one or more tags (short strings or labels) from a group.

Color Picker¶

Use a color picker to pick an arbitrary color.

Color Palette¶

Use a color palette to pick one color from a group of colors.

Rating¶

Use a rating component to capture a star-rating.

File Upload¶

Use a file upload component to get one or more files from the user.

Inputs¶

Create custom input components that respond to gestures.

Tap
More

Use banners to show errors, warnings, or important information related to an operation.

Basic

Progress Bar¶

Use progress bars to show the completion status of long-running operations.

Spinner¶

Use a spinner to indicate that a long-running operation is in progress, and it's unsure how long it will take to complete.

Graphics¶

Draw visualizations, microcharts, sparklines, and other data graphics.

Format¶

Learn the basics of formatting and templates.

Format Numbers¶

Language-sensitive number and currency formatting.

Format Dates¶

Language-sensitive date, time, and relative time formatting.

Help¶

Show context-sensitive hints and help.

Hotkeys¶

Assign keyboard shortcuts to actions.

Tap

Separator¶

Use a separator to visually separate form inputs into sections.

Components¶

A selection of useful components that you can copy and adapt.

Cards¶

Create content cards by stacking boxes together.

Theming¶

Learn how to customize your app's color scheme.

Advanced¶

Learn some advanced tips and tricks to level up your Nitro skills.