Open damithc opened 1 year ago
It's still a bit far from what we can eventually put in the UG. Perhaps something like this?
Customizing the list appearance
The list icons can be customized by adding an {icon="..."} at the end of a list item or a list itself.
{icon="..."}
CODE:
* item 1 line 1 {icon=":x:"} * item 2 line 1 item 2 line 2 {icon=":fas-flag:"} * item 3 * item 4 {icon=":tick:"}
OUTPUT: ...
Notes:
It is possible to specify icons for nested levels using the icons attribute.
icons
* item 1 * item 2 * item 2.1 * item 2.2 * item 3 {icons=":thumbs_up: :light_bulb:"}
OUTPUT: 👍 item 1 👍 item 2 💡 item 2.1 💡 item 2.1 👍 item 3
The icon appearance can be customized further using a size attribute and a class attribute.
size
class
* item 1 line 1 {icon=":fas-home:"} * item 2 line 1 item 2 line 2 {icon=":fas-user:"} * item 3 line 1 item 3 line 2 {icon=":fas-flag:" class="bg-danger"} {size="s" class="badge bg-success me-1"}
OUTPUT:
Another possibility is to specify a shape and a background, similar to how it is done in the thumbnails feature.
shape
background
* item 1 {icon=":book:"} * item 2 {icon=":pen:"} {shape="circle" size="100" background="#dff5ff"}
It is possible to use images as the icon, in which case the attribute width can be used as well.
width
* ### heading 1 item 1 line 1 item 1 line 2 {icon="images/p1.png"} * ### heading 2 item 2 line 1 item 2 line 2 {icon="images/p2.png"} * ### heading 3 item 2 line 1 {icon="images/p3.png"} {width="100" class="rounded"}
It's still a bit far from what we can eventually put in the UG. Perhaps something like this?
Customizing the list appearance
The list icons can be customized by adding an
{icon="..."}
at the end of a list item or a list itself.CODE:
OUTPUT: ...
Notes:
It is possible to specify icons for nested levels using the
icons
attribute.CODE:
OUTPUT: 👍 item 1 👍 item 2 💡 item 2.1 💡 item 2.1 👍 item 3
The icon appearance can be customized further using a
size
attribute and aclass
attribute.CODE:
OUTPUT:![image](https://github.com/damithc/foo/assets/1673303/f5b11cb3-41eb-426e-ab78-db41363d3d25)
Another possibility is to specify a
shape
and abackground
, similar to how it is done in the thumbnails feature.CODE:
OUTPUT:![image](https://github.com/damithc/foo/assets/1673303/3afb12f7-0085-4b88-8e64-70c00d2a908f)
It is possible to use images as the icon, in which case the attribute
width
can be used as well.CODE:
OUTPUT: ...