Use case:
Add two text size fields instead of one for the Text and Title components so that text size can be configured differently on mobile and desktop.
Solution options:
Solution options | constraints/limitations |
---|---|
solution 1: style="font-size:${properties.fontSize @ context='styleToken'}px; font-size-mobile:${properties.fontSizeMobile @ context='styleToken'}px | browser not recognizefont-size-mobileclass |
solution 2:style="font-size:${properties.fontSizeMobile @ context='styleToken' || properties.fontSize @ context='styleToken'}px | syntax error |
Screenshot of solution1 :
ASK?
What's the valid slightly code to support above use case?
CODE:
/text/_cq_dialog/.content.xml:
<fontSize
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/numberfield"
fieldLabel="Font Size"
name="./fontSize"
min="12"
max="120"
defaultValue="18">
</fontSize>
<fontSizeMobile
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/numberfield"
fieldLabel="Font Size Mobile"
name="./fontSizeMobile"
min="1"
max="100"
defaultValue="0">
</fontSizeMobile>
Text.html:
Solved! Go to Solution.
I would something like this:
<sly data-sly-test.yourcss="${'font-size: {0}px' @ format=properties.fontSize }"/>
<div style="${ yourcss @ context = 'styleString'}"></div>
Basically in the first line you concatenate, in the second line your print/encode.
Views
Replies
Total Likes
I would something like this:
<sly data-sly-test.yourcss="${'font-size: {0}px' @ format=properties.fontSize }"/>
<div style="${ yourcss @ context = 'styleString'}"></div>
Basically in the first line you concatenate, in the second line your print/encode.
Views
Replies
Total Likes
Thanks Feike, really appreciate the response.
could you pls elaborate? i'm new to HTL . additional example would help.
Views
Replies
Total Likes
With the format option you can concatenate things.
have you tried this?
Views
Replies
Total Likes
Hi Feike
It worked! thanks, really appreciate the help.
Views
Replies
Total Likes
cool!
Views
Likes
Replies