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 install
andnpm run build:fast -- --nolint
from theFluidFramework
root 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 start
from 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.
Badge uses the following distributed data structures:
- SharedDirectory - root
- SharedMap - stores the status options for the Badge
- SharedCell - represents the Badge's current state