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:
GitHub repo: https://github.com/officedev/office-ui-fabric-react
Documentation: https://developer.microsoft.com/en-us/fabric/#/components
import { DefaultButton } from 'office-ui-fabric-react';
const MyComponent = () => {
return (
<div>
<DefaultButton>Hello World</DefaultButton>
</div>
);
};
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>
);
};
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>
);
};
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.