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.
If you want to run this example follow the following steps:
- Run
npm installfrom theFluidFrameworkroot directory - Navigate to this directory
- Run
npm run start
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