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

Merge pull request #37 from ecraig12345/day2-2

Browse Source 
Step 2-02 updates
This commit is contained in:
Kenneth Chau
2019-02-27 23:01:38 -08:00
committed by GitHub
parent dac6f4b5d8 bfc545ea5d
commit dbc5117380
1 changed files with 39 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
step2-02/README.md
View File

@@ -2,38 +2,38 @@
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) [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. [UI Fabric](https://developer.microsoft.com/en-us/fabric) is a component library that reflects 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).
We'll talk about: We'll talk about:
- What makes it good - [What makes it good](#what-makes-it-good)
- How to find it - [How to find it](#how-to-find-it)
- How to use it - [How to use it](#how-to-use-it)
- Laying out Apps with Stack - [Laying out apps with Stack](#layout-with-stack)
# What Makes It Good ## What Makes It Good
- Fabric has been developed BOTH by developers and design engineers working together as a team - Fabric has been developed BOTH by developers and design engineers working together as a team
- Most notable Microsoft web products use it - Most notable Microsoft web products use it
- It is documented both from examples and generated from API (TypeScript) itself - It is documented both with examples and TypeScript API documentation
- Components are highly customizable and themeable - Components are highly customizable and themeable
- Comprehensive library - Comprehensive library
- Works with (aria) and augments (focus management) web accessibility standards - Works with assistive technologies and conforms to web accessibility standards for focus management
- Fully funded and well managed - shield rotation and lots of automation work - Fully funded and well managed - shield rotation and lots of automation work
- Engineering is done in the open in github.com - Engineering is done in the open on GitHub
- Engineering system is shared and re-usable by other teams - Engineering system is shared and re-usable by other teams
# How to Find It ## How to Find It
github repo: GitHub repo:
https://github.com/officedev/office-ui-fabric-react https://github.com/officedev/office-ui-fabric-react
Documentation can be found here: Documentation:
https://developer.microsoft.com/en-us/fabric/#/components https://developer.microsoft.com/en-us/fabric/#/components
# How to Use It ## How to Use It
## Importing a Component ### Importing a Component
```jsx ```jsx
import { DefaultButton } from 'office-ui-fabric-react'; import { DefaultButton } from 'office-ui-fabric-react';
@@ -47,11 +47,11 @@ const MyComponent = () => {
}; };
``` ```
## Customizing Behavior of Individual Component ### Customizing Behavior of Individual Components
Take a look at the documentation: https://developer.microsoft.com/en-us/fabric#/components/button Take a look at the [Button documentation](https://developer.microsoft.com/en-us/fabric#/components/button).
Let's say we want an Icon to be rendered with the Button Text, we'd use the `iconProps` From the documentation, we can see that if we want to render an icon along with the button's text, we can pass `iconProps` to the button:
```js ```js
import { DefaultButton } from 'office-ui-fabric-react'; import { DefaultButton } from 'office-ui-fabric-react';
@@ -65,9 +65,9 @@ const MyComponent = () => {
}; };
``` ```
## Render Props ### Customizing Component Rendering
Some Fabric components take in a render function like the TextField: Some Fabric components take in a render functions to allow customizing certain parts of the component. An example with TextField:
```js ```js
import { TextField } from 'office-ui-fabric-react'; import { TextField } from 'office-ui-fabric-react';
@@ -82,36 +82,36 @@ const MyComponent = () => {
}; };
``` ```
# Layout with Stack ## Layout with Stack
Before we start, let's look at flexbox. It is really, really complex to use: Before we start, let's look at flexbox--a new CSS layout method which is powerful, but really, really complex to use:
- a guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - A guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- a tool: http://the-echoplex.net/flexyboxes/ - A tool: http://the-echoplex.net/flexyboxes/
- did you know there were 3 or so flex box standards? i.e. Old links will have non-working code - Did you know there were three or so flexbox standards? (this means old articles may have non-working code)
Fabric's answer is: Stack Fabric's answer is: Stack.
> A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components. **Stack** is a container-type component that abstracts the usage of flexbox to define the layout of its child components.
The concepts are: Flexbox uses CSS styles to control:
- direction - direction
- grow - grow
- shrink
- wrap - wrap
- shrunk - justification
- justify-content
- alignment - alignment
Stack abstracts these CSS and provides a type discoverable. Stack abstracts these CSS styles and provides typings to make them more discoverable.
Checkout a cookbook of sorts in our documentation: https://developer.microsoft.com/en-us/fabric#/components/stack Check out a cookbook of sorts in our [documentation](https://developer.microsoft.com/en-us/fabric#/components/stack).
# Exercise # Exercise
1. Open up the [Documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button) 1. Open the [documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button)
2. Open up the TSX files inside `components/` 2. Open each TSX file inside `exercise/src/components`
3. Replace the DOM tags with Fabric components in those TSX files with these components: 3. Replace some of the built-in HTML tags with these Fabric components:
- Stack - Stack
- DefaultButton - DefaultButton
@@ -119,10 +119,12 @@ Checkout a cookbook of sorts in our documentation: https://developer.microsoft.c
- TextField - TextField
- Pivot (for the filter) - Pivot (for the filter)
# Bonus Exercise > Hint: think about how you can use Stacks to make the layout look nicer.
GO WILD! There are so many components from the Fabric library! Try to put some components in the exercise component files. Try out these concepts that we have mentioned above: ## Bonus Exercise
GO WILD! There are so many components in the Fabric library! Try to put some components in the exercise component files. Try out these concepts mentioned earlier:
- Importing components from `office-ui-fabric-react` - Importing components from `office-ui-fabric-react`
- Customizing component with props found on the documentation site - Customizing component with props found on the documentation site
- Customize component with render props (these will be called onRender or something like that) - Customize component with render props (these will be called onRender___ or similar)