Components - React
These are all built with the React framework
link - developer.microsoft.com/en-us/fluentui/#/controls/web
link - github.com/microsoft/fluentui
npm install @fluentui/react
List Of Components
Name | Comments |
Breadcrumb | This control can be used as a navigational aid for the user. They indicate the current page's location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. |
Button | This control allows the user to trigger an action. |
Calendar | This control allows the user to select and view a single date or a range of dates in their calendar. It's made up of 3 separate views: the month view, year view, and decade view. |
Callout | This control is an anchored tip that can be used to teach people or guide them through the app without blocking them. |
Checkbox | This control allows the user to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off). |
ChoiceGroup | This control allows the user to select a single option from two or more choices. |
ColorPicker | This control is used to browse through and select colors |
Combobox | This control combines a text field and a drop-down allowing the user to select an option from a list or enter their own choice. |
CommandBar | |
ContextualMenu | |
DatePicker | |
DateTimeUtilities | |
DetailsList | |
Dialog | |
DocumentCard | |
Dropdown | This control provides a list in which the selected item is always visible while other items are visible on demand by clicking a drop-down button. |
FacePile | |
FocusZone | |
GroupedList | |
Image | |
Label | This control gives a name or title to a control or group of controls, including text fields, check boxes, combo boxes, radio buttons, and drop-down menus. |
Layer | |
Link | This control provides a link to another part of the application. |
List | |
MarqueSelection | |
MessageBar | |
Modal | |
Nav | |
Panel | |
Persona | |
Pickers | |
PeoplePicker | |
Pivot | |
ProgressIndicator | |
Rating | This control allows a user to provide feedback on a product. |
SearchBox | This control provides an input field for searching content within an application. |
Slider | This control provides a visual indication of adjustable content, as well as the current setting in the total range of content. |
SpinButton | This control allows a user to incrementally adjust a value in small steps. It's mainly used for numeric values, but other values are supported too. |
Spinner | |
SwatchColorPicker | |
TextField | This control allows a user a way to enter and edit text. |
Toggle | This control provides a physical switch that allows someone to choose between two mutually exclusive options. |
Tooltip |
© 2022 Better Solutions Limited. All Rights Reserved. © 2022 Better Solutions Limited TopPrevNext