splitting 2.1 and 2.2 readme's

2026-01-26 14:56:42 +08:00 · 2019-02-28 21:45:48 -08:00
parent 0a7cac4eb3
commit b19973652a
10 changed files with 120 additions and 109 deletions
--- a/step2-02/demo/README.md
+++ b/step2-02/demo/README.md
@@ -0,0 +1,108 @@
+# Step 2.2: UI Fabric Component Library (Demo)
+
+[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
+
+[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:
+
+- [What makes it good](#what-makes-it-good)
+- [How to find it](#how-to-find-it)
+- [How to use it](#how-to-use-it)
+- [Laying out apps with Stack](#layout-with-stack)
+
+## What Makes It Good
+
+- Fabric has been developed BOTH by developers and design engineers working together as a team
+- Most notable Microsoft web products use it
+- It is documented both with examples and TypeScript API documentation
+- Components are highly customizable and themeable
+- Comprehensive library
+- 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
+- Engineering is done in the open on GitHub
+- Engineering system is shared and re-usable by other teams
+
+## How to Find It
+
+GitHub repo:
+https://github.com/officedev/office-ui-fabric-react
+
+Documentation:
+https://developer.microsoft.com/en-us/fabric/#/components
+
+## How to Use It
+
+### Importing a Component
+
+```jsx
+import { DefaultButton } from 'office-ui-fabric-react';
+
+const MyComponent = () => {
+  return (
+    <div>
+      <DefaultButton>Hello World</DefaultButton>
+    </div>
+  );
+};
+```
+
+### Customizing Behavior of Individual Components
+
+Take a look at the [Button documentation](https://developer.microsoft.com/en-us/fabric#/components/button).
+
+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
+import { DefaultButton } from 'office-ui-fabric-react';
+
+const MyComponent = () => {
+  return (
+    <div>
+      <DefaultButton iconProps={{ iconName: 'Mail' }}>Send Mail</DefaultButton>
+    </div>
+  );
+};
+```
+
+### Customizing Component Rendering
+
+Some Fabric components take in a render functions to allow customizing certain parts of the component. An example with TextField:
+
+```js
+import { TextField } from 'office-ui-fabric-react';
+
+const MyComponent = () => {
+  return (
+    <div>
+      <TextField onRenderPrefix={() => <Icon iconName="Search" />} />
+      <TextField onRenderPrefix={() => 'hello world'} />
+    </div>
+  );
+};
+```
+
+## Layout with Stack
+
+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 tool: http://the-echoplex.net/flexyboxes/
+- Did you know there were three or so flexbox standards? (this means old articles may have non-working code)
+
+Fabric's answer is: Stack.
+
+**Stack** is a container-type component that abstracts the usage of flexbox to define the layout of its child components.
+
+Flexbox uses CSS styles to control:
+
+- direction
+- grow
+- shrink
+- wrap
+- justification
+- alignment
+
+Stack abstracts these CSS styles and provides typings to make them more discoverable.
+
+Check out a cookbook of sorts in our [documentation](https://developer.microsoft.com/en-us/fabric#/components/stack).
--- a/step2-02/demo/index.html
+++ b/step2-02/demo/index.html
@@ -4,7 +4,7 @@
    <link rel="stylesheet" href="../../assets/step.css" />
  </head>
  <body class="ms-Fabric">
-    <div id="markdownReadme"></div>
+    <div id="markdownReadme" data-src="./README.md"></div>
    <div id="app"></div>
    <script src="../../assets/scripts.js"></script>
  </body>