Badge

📘 Developer Guide

With the Badge Brick, you can easily add badges to your Dashboard.

🔁 Example

Designer

Runtime

⚙️ Configuration Properties

Key	Label	Description	Default Value
`label`	The Label of the badge	This string will be displayed in the badge `string`	`Badge`
`id`	ID of the Badge	`string` `UUID`	`Random UUID`
`size` *	The size of the Badge	Defines the size of the badge You can also specify a string to define your own state and corresponding styles, see below `xsmall` \| `small` \| `medium` \| `large` \| `string`	`medium`
`state` *	The size of the Badge	Defines the state of the badge You can also specify a string to define your own state and corresponding styles, see below `xsmall` \| `small` \| `medium` \| `large` \| `string`	`medium`
`show`	Toggles the visibility of the badge	Either accepts `true` or `false` `boolean`	`true`
`styles`	~~The style of the badge~~	~~Accepts~~ `CSSStyleDeclaration` ~~as Object~~ `Partial<CSSStyleDelcaration>`	-
`defaultStyles.color`	~~Defines the text color of the badge~~	~~Accepts either~~ `string` ~~like~~ `rgb(255,0,0)` ~~or a~~ ~~FyzSbBadgeColor~~ `string` \| `FyzSbBadgeColor`	`'white'`
`defaultStyles.backgroundColor`	~~Defines the background color of the badge~~	~~Accepts either~~ `string` ~~like~~ `rgb(255,0,0)` ~~or a~~ ~~FyzSbBadgeColor~~ `string` \| `FyzSbBadgeColor`	`blue`
`defaultStyles.nowrap`	~~Defines if the text is oneliner~~	~~If set, the label will not break into new line~~ ~~Accepts either~~ `true` or `false` `boolean`	-

🎨 Available Colors

enum FyzSbBadgeColor  {
	TINT = '#007AFF',
	LABEL = '#404040',
	RED = '#FF3B30',
	ORANGE = '#FF9500',
	YELLOW = '#FFCC00',
	GREEN = '#34C759',
	MINT = '#00C7BE',
	TEAL = '#30B0BE',
	CYAN = '#32ADE6',
	BLUE = '#007AFF',
	INDIGO = '#5856D6',
	PURPLE = '#AF52DE',
	BROWN = '#A2845E',
	GRAY = '#8E8E93',
	FYZ_DEFAULT = '#FF4842',
	FYZ_ORANGE = '#FE8900',
	FYZ_PINK = '#FF2D55',
	BLACK = '#000',
	WHITE = '#ffff',
	TRANSPARENT = 'transparent',
}

🛠️ Usage

Designer

(Use the build in configuration Inputs in the right Side-Nav)

TBD

Runtime

(Edit the whole configuration of the Badge to your liking)

⌨️ Programmatical Data

How to style custom States/Styles

[state="customState"] {
    --fyz-sb-button-padding-tb: 32px;
    --fyz-sb-button-padding-lr: 32px;
    --fyz-sb-button-radius: 0;

    background-color: green;
    font-family: 'Times New Roman', Times, serif;
    font-size: 24px !important;
}

How to update the badge via scripting

// ⚙️ Retrieve the current configuration of the Brick
const config = fyzBrick.cRef.getConfig();

// 💱 Modify and merge the config to change to the desired button/behavior
fyzBrick.cRef.mergeConfig({ ...config,state: size: 'large'"customState", label: 'Changed"New viaBadge scripting',
    defaultStyles: {
        color: 'red',
        backgroundColor: 'white'
    }Label" })