I'm new to SFCC and I was wondering what is the best practices with writing conditional CSS classes in the ISML template. I couldn't find anything in the documentation specifically for element parameters but I have seen some code which works but doesn't look right to me.
<div class="foo <isif condition="${bar}">baz</isif>"></div>
Is this the right way to conditionally add a CSS class?
This is the documentation I've found for isif
https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp?topic=%2Fcom.demandware.dochelp%2FScriptProgramming%2FDemandwareJavaScriptExpressionsinISML.html
This variant is a little bit shorter
<div class="foo ${bar ? 'baz' : 'someting else'}></div>
From my understanding you first need to write the isml condition and inside it the html div, something like this:
<isif condition="${bar}">
<div class="foo">baz</div>
</isif>">
I'm only a couple months new to SFF so forgive me if I'm wrong.
Related
Could you tell me the way to do something like this in tailwindcss:
first[&>.a-child-class]:text-5xl
I'm trying to style the first element by the way passing classes when it's rendering,I want to change its child's style, but the code above did not work.
I tried to put that classes inside component by default, but I realized, the component need to reusable, so that it is not reasonable.
please help meeeee.
thank you so much, have nice day.
In tailwind 3.1, arbitrary variants can be stacked with built-in modifiers or with each other, just like the rest of the modifiers in Tailwind. You can see the document here. You are missing : after first.
Example:
<div className="first:[&>.a-child-class]:text-5xl">
<p className="a-child-class">first</p>
<p className="a-child-class">second</p>
<p className="a-child-class">third</p>
<p className="a-child-class">forth</p>
</div>
Tailwind Play demo
I have two view editmode:"New" and editmode:"edit" and trying to add different style for a paragraph, how to do that?
<p style="margin-left: 165px;margin-top: -23px;">===some messages---</p>
I'm not sure I really understand your question but if you want to add a different style depending on a variable you can do it with ngClass
You can use it like this
<p ng-class="{myClass: var}">Some text</p>
If the variable 'var' is == true then it will add the class 'myClass' to the paraghraph
There is more way how to use it, you can refer to the documentatation
https://docs.angularjs.org/api/ng/directive/ngClass
I think you need to be a little more specific on your question, or perhaps offer up an example.
BUT if I am reading this correctly, I'd suggest giving the separate <p> tags an ID and changing the properties in a CSS file. Make sure to attach the CSS file to your index.html
For more clarification, go HERE and get a better idea of how CSS can help.
If this wasn't helpful, I apologize. The question left a lot to be desired
I'm trying to build some navigation directives to isolate complexity. I want the following HTML to render my navigation:
<custom-nav>
<nav-item>Item 1</nav-item>
<nav-item>Item 2</nav-item>
<nav-item>Item 3</nav-item>
</custom-nav>
If I wrote the directives right now, the resulting compiled HTML would look like this:
<custom-nav>
<nav>
<ul>
<nav-item><li><a>Item 1</a></li></nav-item>
<nav-item><li><a>Item 2</a></li></nav-item>
<nav-item><li><a>Item 3</a></li></nav-item>
</ul>
</nav>
</custom-nav>
however, this is invalid HTML (<ul>s can only have <li>s as children).
Without using replace: true, what is the best way for me to tackle this? The only things I can think of are:
Don't use <ul> or <li> - use aria roles to define my own list items.
Don't make the list semantically a list. I really don't want to do this.
Is there something I'm overlooking?
I am not sure if I understood the issue correctly, but what I can say is,
you can pass the items you want to use as li, in an array, as a parameter to the directive, and loop over it in your link function to generate the recommended html result, that would remove any complexity related to the issue
please let me know if I misunderstood you.
Best of luck
What is the below code for?
I am new to jade. The below is a code i am stuck with.
extends layouts/default
block content
div.column(ui-auth-directive)
Here extends is going to extend default.jade, then to that, it is going to append the div tag.
But I dont understand what does this div.column mean? and what is this ui-auth-directive mean?
Upto my understanding, div.abcd means that abcd is a class.. Could some one please help me in this regard.
Thanks,
Sabarisri
div.column(ui-auth-directive) will compile to:
<div class="column" ui-auth-directive></div>
Understanding what the directive does is up to you and your code. It will be defined by your angular module.
I have the component and have a problem setting the css class to it.
I want it to always have a class of "box", then to have additional classes specified by the directive "class" argument and one conditional class "mini".
Conceptually what I want to achieve is something like this:
<div class="box {{class}}" data-ng-class="{mini: !isMaximized}">
...
</div>
The problem is that when I set the class html attribute, the ng-class attribute is omitted.
How to make my example work without changing the controller? Is it even possible, or should I set the class in the controller instead (which I wish to avoid)?
A quick solution would be define the box class inside ng-class attribute:
<div data-ng-class="{mini: !isMaximized, box: true}"></div>
If you want to include a scope variable as a class, you can't use ng-class:
<div class="{{class}} box {{!isMaximized && 'mini' || ''}}">
Angular expressions do not support the ternary operator, but it can be emulated like this:
condition && (answer if true) || (answer if false)
I needed multiple classes where one was $scope derived and others were literal classes. Thanks to the hint from Andre, below worked for me.
<h2 class="{{workStream.LatestBuildStatus}}"
ng-class="{'expandedIcon':workStream.isVisible, 'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>
Edit: for newer versions of Angular see Nitins answer as it is the best one atm
For me, this worked (I'm working on AngularJS v1.2.14 at the moment so I guess 1.2.X+ should support this, not sure about the earlier versions):
<div class="box" data-ng-class="{ {{myScopedObj.classesToAdd}}: true, mini: !isMaximized }"></div>
I replaced your {{class}} with {{myScopedObj.classesToAdd}} to show that any scoped variable or even a bit more complex object can be used this way.
So, every DIV element crated this way will have "box" class and any class contained within myScopedObj.classesToAdd (useful when using ng-repeat and every element in the array needs to have a different class applied), and it will have the "mini" class if !isMaximized.
Another way to do this without double curly braces and includes scope variables, tested with angular v1.2+.
<div ng-class="['box',
aClass,
{true:'large': false: 'mini'}[isMaximized]]"></div>
It's also rather nice because the variable can use different types as a index without increasing complexity using ternaries. It can also remove any need for negations ;)
Here is a fiddle link
You can use simple expression given below
ng-class="{'active' : itemCount, 'activemenu' : showCart}"