microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

adding documentation

Browse Source
This commit is contained in:
Ken
2019-02-23 07:56:29 -08:00
parent 672099ccdd
commit 221485a940
59 changed files with 3448 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/step2-02/README.md Normal file
View File

@@ -0,0 +1,32 @@
# Step 2.2: UI Fabric Component Library
[Lessons](../) | [Exercise](./exercise/) | [Demo](./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](https://developer.microsoft.com/en-us/fabric/#/components/button)
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.

8
docs/step2-02/demo/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html>
<html>
<body>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div>
<script src="../../step2-02/demo/step2-02/demo.js"></script></body>
<script src="../../step2-02/demo/step2-02/demo.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body>
</html>

2
docs/step2-02/demo/step2-02/demo.js
View File

File diff suppressed because one or more lines are too long

8
docs/step2-02/exercise/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html>
<html>
<body>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div>
<script src="../../step2-02/exercise/step2-02/exercise.js"></script></body>
<script src="../../step2-02/exercise/step2-02/exercise.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body>
</html>

2
docs/step2-02/exercise/step2-02/exercise.js
View File

File diff suppressed because one or more lines are too long