Need some help on transclude each tiddlyer's icon color in to a list

#1

i have several tiddler’s with “icon” “color” “url” fields.

now, i am going to make a list of them. the only problem is the icon color showed in the list alway grap the last list icon’s color even i have different color on each icons.

<$list filter="[tag[work_bookmarks]]">
<$transclude $tiddler="icon-template" > 
    <$fill $name="color">
    {{!!color}}
    </$fill>
</$transclude>
<$link />
<$transclude tiddler="url_template" />
<br>
</$list>

“icon-template” is show below:

<style>
.my-icon svg {
  width: auto;
  height: 1em;
  fill: <$slot $name="color"/>;
}
</style>


<span class="my-icon" ><$transclude $tiddler={{!!icon}}/></span>

“url_template” is like this below:

<a href={{!!url}}> {{!!title}} </a>
#2

This is because after the listwidget renders the icon-template, several <style> element is rendered, which the last one has the highest priority, making the other CSS be ignored. To make list items use unique colors, the icon-template can be changed like this:

\parameters(tiddler-color)
<style>
.my-icon svg {
  width: auto;
  height: 1em;
}
</style>

<span class="my-icon" style.fill=<<tiddler-color>>><$transclude $tiddler={{!!icon}}/></span>

And the listwidget:

<$list filter="[tag[work_bookmarks]]">
<$transclude $tiddler="icon-template" tiddler-color={{!!color}}/>
<$link />
<$transclude tiddler="url_template" />
<br>
</$list>
2 Likes
#3

A nice example of template with parameter :wink:

#4

I would recommend using stylesheet tiddler for any CSS rule. So, I would not embed the css into the template.

While, I am a fan of template and believe they are very powerful, but for your case one another compact solution is like below

Stylesheet tiddler:
tag: $:/tags/Stylesheet
type: text/css

.my-icon svg {
  width: auto;
  height: 1em;
}

Procedure tiddler:

\procedure link-iconify(filter)
	<$list filter="[subfilter<filter>]">
		<span class="my-icon" style.fill={{!!color}}>
			<$transclude $tiddler={{!!icon}} $mode=inline/>
		</span>
		<$link/><br/>
	</$list>
\end

Example

<<link-iconify "[tag[work_bookmarks]]">>

Produces:

image

If the filter is stored in a field, you may use it as below

<$transclude $variable=link-iconify filter={{!!myfilter}}>>
#5

this works!!! thanks

#6

i am try to implement your compact solution, but didn’t work. attached screen shot below.

image
image1671×705 38.2 KB

image
image1725×703 42.2 KB

image
image1723×698 52.2 KB

#7

You need to move the procedure definition to “test for result” tiddler to make it available in the tiddler. Otherwise you need to make the procedure definition global (by adding a $:/tags/Global tag to “my-icon procedure tiddler”).

#8

wow…lots to learn in Tiddlywiki, thanks!

#9

In the resulting list, I would like to see the caption field instead of tiddler title. What should I add to the procedure tiddler?

#10

I’ve finally found the solution:

\procedure link-iconify(filter)
	<$list filter="[subfilter<filter>]">
		<span class="my-icon" style.fill={{!!color}}>
			<$transclude $tiddler={{!!icon}}
$mode=inline/>
		</span>
    <$link to={{!!title}}>
      <$view field="caption" />
    </$link><br/>
	</$list>
\end
1 Like