Components
Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a form card.
info
Several of the components below allow users to input information or interact with them in some way. To know what the user did, see event arguments.
In places where a component accepts an icon
argument, you can specify any of the Office UI Fabric Icons. For example,
Content
Text
Use text()
or one of its variants to display text content. Markdown works, too. text_xl()
and text_l()
support context menus.
See ui.text() ui.text_l() ui.text_m() ui.text_s() ui.text_xl() ui.text_xs()
Label
Use a label to give a name or title to other components.
See ui.label()
Link
Use link()
to display a hyperlink.
See ui.link()
Template
Use template()
to render dynamic content using HTML.
See ui.template()
HTML
Use markup()
to display raw HTML.
See ui.markup()
Inline frame
Use frame()
to embed external HTML content using an inline frame.
See ui.frame()
Table
Use a table to display tabular data. A table also functions as an input element, and can report row(s) selection, useful for building master-detail views.
See ui.table()
Inputs
Checkbox
Use a checkbox to allow switching between two mutually exclusive options (checked/unchecked or on/off).
See ui.checkbox()
Checklist
Use a checklist to display a list of checkboxes.
See ui.checklist()
Choice Group
Use a choice group (also called radio buttons) to allow switching between more than two mutually exclusive options.
Color Picker
Use a color picker to allow pick colors or swatches.
Combo Box
Use a combo box to allow picking from a list of choices, or typing in custom values.
See ui.combobox()
Date Picker
Use a date picker to allow picking a date.
See ui.date_picker()
Dropdown
Use a dropdown to allow picking from a list of choices.
See ui.dropdown()
File Upload
Use a file upload component to allow uploading files.
See ui.file_upload()
Picker
Use a picker component to allow picking multiple tags or labels from a list.
See ui.picker()
Range Slider
Use a range slider to allow selecting a range of values within another range.
Slider
Use a slider to allow selecting a value from a range of values.
See ui.slider()
Spin Box
Use a spin box to allow incrementally adjusting a value in small steps.
See ui.spinbox()
Table
Use a table to display tabular data, or allow selecting one or more rows.
See ui.table()
Textbox
Use a textbox to allow typing in text.
See ui.textbox()
Toggle
Use a toggle to allow switching between two mutually exclusive options (checked/unchecked or on/off), while producing an immediate result. See ui.toggle()
Commands
Command
Use a command to define menu items for cards and components that support menus and context-menus.
See ui.command()
Button
Use button()
to display a clickable button.
See ui.button()
Button Set
Use buttons()
to display two or more buttons side by side.
See ui.buttons()
Tabs
Use tabs()
to display a set of tabs.
See ui.tabs()
Engagement
Message Bar
Use a message bar to display information, warning and error notifications.
See ui.message_bar()
Progress Bar
Use a progress bar to display progress information for tasks or operations.
See ui.progress()
Stepper
Use a stepper to display a sequence of steps in a process, and how many have been completed.
See ui.stepper()
Graphics
Visualization
Use visualization()
to display visualizations defined using Q's native plot()
API, based on the Grammar of Graphics.
Vega-lite Visualization
Use vega_visualization()
to display visualization defined using Vega-Lite.
Utilities
Expander
Use an expander to show or hider a group of related components.
See ui.expander()
Separator
Use a separator to visually separate components in to groups.
See ui.separator()