design-patterns-controls.md

Controls

Controls are the building blocks of the Azure UX. They allow users to view, edit, and analyze data. Using built in controls provides consistency across the portal. Additionally, issues around usability, accessibility, security and any other fundamentals are handled by the Framework team. For developer info see top-extensions-controls.md

Last updated Jul 2020 (see change logs)

Text input

• CopyableLabel
• NumericTextBox
• PasswordBox
• TextBox
• MultiLineTextBox

Selectors

• CheckBox
• TriStateCheckBox
• DropDown
• OptionsGroup
• RadioButtons
• RangeSlider
• Slider
• SubscriptionDropDown
• ResourceGroupDropDown
• LocationDropDown

Pickers

• DatePicker
• DateTimePicker
• DateTimeRangePicker
• DayPicker
• DurationPicker
• TimePicker
• ScopePicker

Additional input controls

• DiffEditor
• EditableGrid
• Editor
• FileUpload
• InputParameters
• PricingControl
• TagsByResource

Layout

• Accordion
• Section
• Splitter
• TabControl

Content

• CopyableLabel
• CustomHtml
• DocsControl
• Essentials
• InfoBalloon
• InfoBox
• FrameControl
• Legend
• Markdown
• TextBlock
• Summary
• Video

Grids and lists

• DataGrid
• EditableGrid
• ListView

Filtering

• Pill
• PillCollection
• SearchBox

Commands

• Button
• Toolbar

Data visualization

• AreaChart
• BarChart
• Donut
• LineChart
• Map
• Metrics
• MonitorChartV2
• QuotaGauge
• ScatterChart
• SingleMetric
• SingleValueGauge

Progress & validation

• ArmErrorList
• ProgressBar

Surfaces

• Blade
• ContextPane
• Dialog
• [Card] Card is implemented using [ListView] with a specific template

Utilities

• Console
• FileDownload
• LogStream
• OAuthButton

Customization

Themes and colors are handled at the portal level see portalfx-extensions-style-themed-color-classes.md

Accessibility

For accessibility information see portalfx-accessibility.md

Change logs

Jul 2020

• Published