Pill Component
Category: NavigationThe pill component is a standalone tab-switching component that only includes the tab header (not the tab body). It resembles a capsule shape and features an animated moving background block.
Introduction
Tab components typically require both tab headers and tab bodies, while this component only includes the tab headers. Any parent-child node structure can serve as the tab body. Additionally, this component's option background can animate like a cursor when selected.
Basic Usage
Use the oc-pill tag to represent this component. Pass simple content through the content attribute, with multiple items separated by commas.
- Output
- HTML
Content can also be written directly inside the tag.
- Output
- HTML
-
Japan,India,South Korea -
Active Item
The first item is active by default. Use the active attribute to set the index of the active item (0 for the first item).
- Output
- HTML
Disabled Items
Use the disable attribute to set the index of disabled items (0 for the first item). For multiple disabled items, separate indices with commas.
- Output
- HTML
Sizes
Define pill size using the size attribute, with three supported sizes:
- size=sm: Small size, height 24px (2.4rem)
- size=md: Medium size, height 32px (3.2rem) - default
- size=lg: Large size, height 40px (4rem)
- Output
- HTML
Using full Attribute
Component width depends on child item widths. Add full attribute to span horizontally.
- Output
- HTML
Using disabled Attribute
Add disabled attribute to disable the entire component.
- Output
- HTML
Attributes
| Name | Type | Values | Default | Description |
|---|---|---|---|---|
| content | string | - | - | Data source |
| active | number | - | 0 | Index of currently active item |
| disable | number | - | - | Index of disabled item |
| size | string | 'sm'/'md'/'lg' | 'md' | Size |
| refer | string | - | - | Tab body node selector |
| name | string | - | - | Form field name |
| full | boolean | ''/- | - | Whether to stretch horizontally |
| disabled | boolean | ''/- | - | Whether disabled |
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')})