Bullet Section: Detailed Usage and Examples

Last updated: 4 months ago

Category: Examples

Bullet is commonly referred to as an unordered list or brief news, primarily consisting of short text and usually without accompanying images; bullet can also consist of one or more lines of text but may be supplemented with small images or icons; bullet is created using CSS+HTML and can be used anywhere in the body of a webpage or encapsulated by other components or modules.

Ranking List

Insert a tag with rep="rank" to display ranking numbers.

Dividers

Styling

By default, _bullet has no borders or background. You can combine it with _bd (border), _r[-*] (radius), _sd[-*] (shadow), and _bg[-*] (background) to add border and background effects.

Styling with Gaps

If the above styling effects are unsatisfactory, you can try using _p[-*] style classes to add list gaps.

States

Items have five states: one normal state and four special states (selected, active, checked, disabled).

Static Checkmark

If you need to conditionally modify the _bullet structure and statically display a checkmark icon, add an i tag with rep=check. This icon is purely indicative and inherits its color.

Checked Confirmation

There are two ways to implement "checked" states - static method (when users can modify HTML structure) and using the checked attribute (recommended when users can't modify structure). The checked attribute can be combined with any state:

Hoverable

To make items change style on mouse hover, add the hoverable attribute. This will automatically change the background color on hover (default light gray).

Using ul Tags

This framework doesn't remove all formatting from ul and ol tags - it preserves their original formatting. So if you need to use ul or ol as list containers, apply the _reset style class to them.

Checkbox Selection

You can directly append oc-checkbox tags to bullet items when needed.

Radio Selection

You can directly append oc-radio tags to bullet items when needed.

Pure Checkbox

You can use the OC-CHECKBOX component to create a checkbox list.

Pure Radio

You can use the OC-RADIO component to create a radio list.

Complex Applications

Although only one line of text is displayed, many native and custom elements can be inserted. Here are examples.

Multi-line

To display multiple lines of text, add the multiline attribute.

Multi-line Check

Multi-line with Icons

Multi-line bullets also support icons and images. Icons include icon, disk and cube, typically placed at the front of the bullet.

Complex Multi-line Applications

Multi-line bullets support all elements just like single-line ones, in addition to icons and images.

Optimal Responsiveness

Since bullets can display many elements, desktop layouts typically use horizontal tiling, while mobile screens with limited space should tile vertically.