Buoy Component

Last updated: 4 months ago

Category: Data

A buoy float is typically used to display small statistical data. Though compact in size, it includes all essential elements such as value, label, icon, arrow, and tips—truly embodying the idea of 'small but complete.'

Introduction

Unlike badges and tags, the buoy component combines indicator and data display functionality. Use the oc-buoy custom tag to create a standard buoy. The value can be set via the value attribute or directly within the tag content. Use the label attribute to set the buoy's text.

Basic Usage

The simplest usage is with just the value attribute. The value can be specified in the value attribute or directly within the element.

Color Themes

Change the buoy's color theme using the theme attribute. Available themes: prim, error, succ, info, warn, issue, text, brief.

Using Labels

Use the label attribute to display the buoy's characteristic or type.

Using Icons

Add an icon to the buoy's header using the icon attribute to specify the icon's style class.

Using Arrows

When a buoy triggers a popup or tooltip, add the arrow attribute to include an indicator arrow.

Using Flipped Layout

By default, the background color is applied to the label. Add the flipped attribute to apply it to the value instead.

Sizes

Set the buoy's size with the size attribute. Supported sizes: sm (18px height), md (24px height, default), and lg (32px height).

Operations

An example demonstrating property manipulation of the buoy tag.

Attributes

Common Methods

Common component methods:

• set: Set properties (takes key-value pairs or array)
• reset: Reset properties (no params)
• clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Common Events

Common component events:

• connected: Component connected (no params)
• disconnected: Component disconnected (no params)
• adopted: Component moved (no params)
• set: Property set (receives value)
• cleared: Property cleared (no params)
• reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})