Good

Last updated: 9 days ago

Category: Basic

The like component is typically used at the end of an article, allowing users to show their support by liking it. While its functionality is singular, it supports rich sub-elements including like coun...

Good9 days ago

Basic Usage

The like button is commonly found at the end of articles and is an essential component for modern web media. Simply wrap the numeric text with the <oc-good> tag to use this framework's like component. The icon attribute can specify the style class for the like icon.

Output
HTML

25 165
```
                
                
            
```

Using Text Labels

The like component supports two text elements:

label: Displayed above the button to prompt users to like
tips: Displayed below the button for additional information (e.g. "You've already liked")

Output
HTML

25 165
```
                
                
            
```

Completed Like State

Add the increased attribute to indicate a completed like action. This grays out the component while still allowing JavaScript interactions.

Output
HTML

165
```
                
                
            
```

Attributes

Attribute	Values	Default	Description
label	string	-	Header text
value	string	-	Like count
icon	string	-	Like icon class
tips	string	-	Footer text
disabled	string	-	Disable state
increased	string	-	Completed state

Increase Method

The increase() method increments the like count with two parameters:

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

Interactive Example

Here's a demonstration of manipulating the attributes of the OC-GOOD tag to observe component changes.

Flag

9 days ago