Bulls

Bulls is a component that displays different types of status indicators as SVG icons. It’s useful for showing success, failure, pending, warning, or informational states in your application.

Usage

See the Example by Serhii Pimenov on CodePen.

Basic Usage

<div data-role="bull" data-type="success" data-size="24"></div>

Plugin Parameters

Parameter	Type	Default	Description
type	string	”success”	Type of bull icon. Possible values: “success”, “fail”, “pending”, “warning”, “bulb”, “default”
size	number	16	Size of the bull icon in pixels
onBullCreate	function	Metro.noop	Callback function triggered when the bull is created
onBullChange	function	Metro.noop	Callback function triggered when the bull type is changed

API Methods

• setType(type): Changes the type of the bull component.
• changeAttribute(attr, value): Changes the attribute of the bull component.
• destroy(): Removes the bull element from the DOM.

Example

<div id="myBull" data-role="bull" data-type="fail" data-size="32"></div>

const bull = Metro.getPlugin('#myBull', 'bull');
bull.setType('warning'); // Change the bull type to warning

Global Configuration

You can set up global configuration for all bull components using:

Metro.bullSetup({
    size: 32
});

Bull types

• success: Indicates a successful operation.
• fail: Indicates a failed operation.
• pending: Indicates an operation that is still in progress (animated).
• warning: Indicates a warning or caution.
• bulb-on: Represents an active informational state.
• bulb-off: Represents an inactive informational state.
• star: Represents a star icon, often used for favorites or highlights.
• badge: Represents a badge icon, often used for notifications or counts.
• chat: Represents a chat icon, often used for messaging or communication.
• tree: Represents a tree icon, often used for hierarchical data or navigation.
• checkmark: Represents a checkmark icon, often used for confirmations or selections.
• cancel: Represents a cancel icon, often used for dismissing or closing actions.
• rocket: Represents a rocket icon, often used for launching or starting actions.

Custom Size

<div data-role="bull" data-type="success" data-size="32"></div>

Custom Colors

<div data-role="bull" data-type="success" data-size="24" style="fill: #57ab5a;"></div>

or

<div data-role="bull" data-type="success" data-size="24" class="fc-red"></div>

Events

Event	Description
bull-create	Triggered when the bull component is created
bull-change	Triggered when the bull type is changed

Styling

The Bulls component uses SVG with inline styling, so there are no specific CSS variables to customize. The colors are defined within the SVG paths:

• Success: Green (#57ab5a)
• Fail: Red (#e5534b)
• Pending: Yellow (#DBAB0A)
• Warning: Orange (#ff4d00)
• Bulb: Yellow (#ffde21)