Chip

<bk-chip></bk-chip>

The Chip is used to display status information inside a badge. The status information can be mapped to the displayed label and the color-coding of the component.

The most common use of the Chip is to be mounted inside other components, for instance the Table or the Card.

How to configure

For proper functioning of the Chip component, properties value and valueMap should be specified.

• value: allows to specify the status value
• valueMap: maps status information to the label and the color-coding of the rendered badge.

Property valueMap expects an object that maps possible status information to objects with keys label and color.

• label supports internationalized objects
• color should be either primary (which corresponds to the primary-color), of any hexadecimal color code

If valueMap is not assigned, the rendered badge has primary-color as color-coding and the status information as label.

{
  "tag": "bk-chip",
  "properties": {
    "value": "active",
    "valueMap": {
      "active": {
        "label": "Active",
        "color": "#0f0"
      }
    }
  }
}

Examples

Example: Chip inside Table

A common use of the Chip is to be mounted inside the Table to render enum properties.

The following configuration renders a Table component with a "status" column which corresponds to an enum field.

{
  "tag": "bk-table",
  "properties": {
    "dataSchema": {
      "type": "object",
      "properties": {
        "status": {
          "type": "string",
          "enum": ["on", "loading", "off"],
          "visualizationOptions": {
            "tag": "bk-chip",
            "properties": {
              "value": "{{args.[0]}}", // <- `{{args.[0]}}` is value of the table cell
              "valueMap": {
                "on": {
                  "label": "ON",
                  "color": "primary"
                },
                "loading": {
                  "label": "Loading...",
                  "color": "#00f"
                },
                "off": {
                  "label": "OFF",
                  "color": "#f00"
                }
              }
            }
          }
        }
      }
    }
  }
}

Each cell of "status" column includes a Chip component having label and color-coding depending on the value of the cell.

API

Properties & Attributes

property	attribute	type	default	description
value	-	LocalizedText	-	status value.
valueMap	-	{[value: string]: any;}	-	map of possible values.

Listens to

None

Emits

None