Badge is a Fluid component that allows users to create an in-line badge within a document to represent the status of the overall document or a section of it.
You can run this example using the following steps:
- Run
npm installandnpm run build:fast -- --nolintfrom theFluidFrameworkroot directory. a. For an even faster build, you can add the package name to the build command, like this:npm run build:fast -- --nolint @fluid-example/badge - Run
npm run startfrom this directory (examples/data-objects/badge) and open http://localhost:8080 in a web browser to see the app running.
Badge includes four preset statuses: Drafting, Reviewing, Complete, and Archived.
You can also set a custom status with any text or color.
The history of the Badge is also shown on hover, so users can see how the status has evolved over time.
Badge uses the following distributed data structures:
- SharedDirectory - root
- SharedMap - stores the status options for the Badge
- SharedCell - represents the Badge's current state
- SharedObjectSequence - stores the history of status changes