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