Step 2.2 - UI Fabric component library (Demo)

Lessons | Exercise

UI 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.

We'll talk about:

What makes it good

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

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.

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:

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:

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 modern CSS layout method which is powerful, but really, really complex to use:

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:

Stack abstracts these CSS styles and provides typings to make them more discoverable.

Check out a cookbook of sorts in our documentation.

todos (2.2 demo)
2 items left