Skip to content

Latest commit

 

History

History
 
 

@fluid-example/badge

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.

Badge UI

Getting Started

You can run this example using the following steps:

  1. Run npm install and npm run build:fast -- --nolint from the FluidFramework 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
  2. 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.

Custom Status

Badge includes four preset statuses: Drafting, Reviewing, Complete, and Archived.

You can also set a custom status with any text or color.

Color picker and custom status UI

Data model

Badge uses the following distributed data structures:

  • SharedDirectory - root
  • SharedMap - stores the status options for the Badge
  • SharedCell - represents the Badge's current state