Package Exports
- @fluentui/react-progress
- @fluentui/react-progress/lib-commonjs/index.js
- @fluentui/react-progress/lib/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fluentui/react-progress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@fluentui/react-progress
React Progress components for Fluent UI React
These are not production-ready components and should never be used in product. This space is useful for testing new components whose APIs might change before final release.
Usage
To import Progress
:
import { Progress } from '@fluentui/react-progress';
Once the Progress component graduates to a production release, the component will be available at:
import { Progress } from '@fluentui/react-components';
Examples
const ProgressExample = () => {
return <Progress thickness="large" value={0.5} />;
};
Using ProgressField
The ProgressField
component is a wrapper around the Progress
component that allows the user to add a label
, hint
, validationMessage
, and validationState
to the Progress
component. You can pass these props, as well as the regular Progress
props to a ProgressField
component.
To import ProgressField
:
import { ProgressField } from '@fluentui/react-field';
const ProgressFieldExample = () => {
return (
<ProgressField
label="Determinate Progress"
hint="This is a determinate Progress with description"
value={0.5}
validationState="warning"
/>
);
};