step2-02

Step 2.2: UI Fabric Component Library

Lessons | Exercise | Demo

UI Fabric is a Component Library that is developed to reflect the latest Microsoft design language. It is used in many Microsoft web applications and is developed in the open:

https://github.com/officedev/office-ui-fabric-react

Documentation can be found here:

https://developer.microsoft.com/en-us/fabric/#/components

Learn about Components and How to Look up Documentation

• Stack
• Default Button / Primary Button

Exercise

1. Open up the Documentation for DefaultButton
2. Open up the TSX files inside components/
3. Replace the DOM tags with Fabric components in those TSX files with these components:

• Stack
• DefaultButton
• Checkbox
• TextField
• Pivot (for the filter)

Bonus Exercise

GO WILD! There are so many components from the Fabric library! Try to put some components in the exercise component files.