Field transclusion formating

#1

Dear friends,

lets say I have field, called field1, with some text: [[term 1]] [[term 2]], [[term 3]] and so on.
If I put {{!!field1}} in the tidller text I get [[term 1]] [[term 2]] [[term 3]], one next to another.
My question is: is there a way to view the results as a simple or a bulleted list?
Thank you!
sklpns

#2

I think the simplest way is to use the list-links macro:

<<list-links "[list[!!field]]">>

This creates a bulleted list:
image

See also how the list operator works.

1 Like
#3

A simple (not bulleted) list can be created this way:

<$list filter="[list[!!field]]"><$link/><br></$list>

image

And, as I have learned just now, the list-links macro can be adjusted to produce a non-bulleted list as well:

<<list-links "[list[!!field]]" type:"div" subtype:"div">>

It will produce the same, non bulleted output:
image

#4

Thank you! Please, where do I need to look about styling the list? Like different kinds of bullets, background etc. Thanks again.

#5

This is the important part of the list-links macro docs:

type
    An HTML element to use for the overall list element, defaulting to `ul`
subtype
    An HTML element to use for each item in the list, defaulting to `li`
class
    A CSS class for the overall list element

So if we take the example of the default bulleted list and add a class:

<<list-links "[list[!!field]]" class:"my-field-list">>

we can then style it by targeting this class. Put the CSS below in another tiddler which will be tagged $:/tags/Stylesheet:

ul.my-field-list {
    background: beige;
    list-style-type: "👉";
}

It will produce this:
image

If you are beginner to CSS, like I still consider myself to be, I think Mozilla’s docs are quite well done with interactive examples, e.g. list-style-type - CSS: Cascading Style Sheets | MDN

1 Like
#6

Thank you very much!

1 Like