Pill Component: More Examples of Styles, Methods, and Event Operations
Category: ExamplesThe 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.
Data Written Inside Tags
For more complex options, data can be written inside the tags.
If only label is needed, the data can be simplified.
Data Written in Attributes
Complex data can also be written in the content attribute, paying attention to single and double quote nesting.
With predefined variables, the content attribute can reference variables.
Using script Tags
If writing arrays as text inside tags is inconvenient for editing, you can add a script tag with type=content attribute and write the data in JSON format inside the script tag. This makes formatting and editing easier.
Note: Regular script tags are executed, but adding an unrecognized type (we use 'content') prevents execution.
Custom Styles
To customize the component's style including background color, borders, and size, modify the CSS variables for colorful styles.
Using refer Attribute
This component can serve as a tab header combined with parent-child node structures to form complete tabs.
Using name Attribute
Since this component is functionally similar to radios components but doesn't store values by default, enable the name attribute to automatically create an input node inside the component for form submission.
Form Containers
This framework uses _field containers to build form sections. The pill component can be placed inside _field-input containers.
changed Event Listening
When switching tabs, the changed event is triggered with an object parameter containing oldVal and newVal.
Events can also be written in JavaScript.
Operation Methods
Built-in methods include reset(), clear(), set(data), active(index), and disable(index):
Using Caching
To cache data when changing element properties or switching tabs (to restore previous state on page reload), use stor-name attribute (ensure unique value in browser cache).
