Flag

Last updated: 9 days ago

Category: Basic

A badge is typically displayed in a floating manner at one of the four corners of an element. The flag component is used to define a badge, supporting three badge styles and multiple theme colors.

Basic Usage

In lists, especially multimedia lists containing images or videos, we often need status indicators to highlight an item's lifecycle. These indicators are typically placed in the top-left or top-right corner. The framework provides the <oc-flag> tag to create these flag badges.

Important: Since flags require absolute positioning, ensure the parent element has position: relative/absolute/fixed set.

Right Alignment

By default, flags appear on the left. To position them on the right, add the placement="right" attribute.

Color Themes

The default theme color is primary. Customize flag colors using the theme attribute with these options:

• prim: Primary color (default)
• error: Error red
• succ: Success green
• warn: Warning orange
• issue: Issue purple
• info: Info blue
• text: Text color
• brief: Secondary text
• caption: Caption text

Flag Types

Change the flag style using the type attribute:

• triangle: Default triangular flag (classic ribbon style)
• circle: Circular badge
• horn: Bookmark-style flag with curved edge

Attributes

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()

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')})