I need to get rel="" into this html. This is part of AEM, so I have an xml file doing this:
content.xml
<rel
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="HTML attribute to apply to the component."
fieldLabel="Rel"
name="./rel"/>
I've tried just duplicating how id is handled, along with a million other things...
button.html
<button
data-sly-use.button="com.adobe.cq.wcm.core.components.models.Button"
data-sly-element="${button.buttonLink.valid ? 'a' : 'button'}"
type="${button.buttonLink.valid ? '' : 'button'}"
id="${button.id}"
rel="${button.rel}" <--THIS DOES NOT WORK
class=""
data-sly-attribute="${button.buttonLink.htmlAttributes}"
aria-label="${button.accessibilityLabel}"
data-cmp-clickable="${button.data ? true : false}"
data-cmp-data-layer="${button.data.json}">
<span data-sly-test="${button.text}" class="">${button.text}</span>
</button>
You can use the properties object with a HTL context attribute.
<button rel=${properties.rel # context='attribute} </button>
this was the answer
rel=${properties.rel}
I am trying to add ternary condition to shape which is an icon type shape="success-standard" - in shape="name.active ? 'success-standard' : 'times-circle'" that's where I am trying to add a condition for icon type. and using [shape] directive doesn't work
<clr-dg-row class="man-rcs" *ngFor="let name of visibleNames">
<clr-dg-cell (click)="handleRowClick(name)" class="tac">
<clr-icon size="18" shape="name.active ? 'success-standard' : 'times-circle'">
</clr-icon>
</clr-dg-cell>
</clr-dg-row>
Normally I would do it like this but that's not what I am looking for in this case
<clr-dg-cell class="tac">
<clr-icon size="18" *ngIf="name?.active" shape="success-standard" class="is-solid is-success"></clr-icon>
<clr-icon size="18" *ngIf="!name?.active" shape="times-circle" class="is-solid is-danger"></clr-icon>
</clr-dg-cell>
You need to bind to the shape attribute like this. Icons are our web components, so you have to use this different approach.
[attr.shape]=“name.active ? ‘success-standard’ : ‘times-circle’”
See How can I dynamically change the shape of a clr-icon custom element? For more details.
Try this code below
<clr-icon size="18" shape="{{name.active == true ? 'success-standard' : 'times-circle'}}">
Or
<clr-icon size="18" shape="(name?.active == true ? 'success-standard' : 'times-circle')">
Hope first code will work
Lets assume below sudo code, As you professionals can see I want to use Ternary kind of condition with ng-if to apply different HTML title attribute.
I tried it as below but it did not work
<td>
<span ng-if="isOk == true ? title ="Is Ok" : title ="Is Not Ok"></span>
</td>
I know I can achieve what I want applying ng-if in <td> level using below code
<td ng-if="isOk == true">
<span title ="Is Ok"></span>
</td>
<td ng-if="isOk != true">
<span title ="Is Not Ok"></span>
</td>
But I want to know weather I can use less code like Ternary check and achieve what I want with ng-if?
I thank you professionals in advace
As it was specified in this thread: if else statement in AngularJS templates, you can use ternary condition this way:
<span title="{{isOk ? 'Is Ok' : 'Is Not Ok'}}"></span>
Is it possible to add multiple attributes based on *ngIf?
My pseudo Code:
<span *ngIf="msg.active" *ngIf="msg.error" >Hallo</span>
And my output should be like this:
If msg.error == false and msg.active== true then it should be like this:
<span>Hallo</span>
If msg.error == true then it should be like this:
<span class="error" myTag="false" myTag2="false" >Hallo</span>
If msg.active == false then the span tag should be empty!
Does anybody have an idea?
i think you should try using nested ternary operator.
<span *ngIf="msg.active==true && msg.error==false? true: msg.active"> hallo <span>
try your condition using ternary operator. hope this will work
for myTag you have to use separate *ngIf
altogether in a single line it is possible as shown here,
DEMO : https://plnkr.co/edit/eKDhkuf3JO8CIKfz7Eqz?p=preview
<span *ngIf="msg.active || msg.error"
[class.error]="msg.error">
{{(msg.active==false)?'':'hello'}}
</span>
In Laravel, how can I use html-tags when linking to a route via HTML::link_to_route()?
Example of what I have:
<li>
{{ HTML::link_to_route( "books_new", "New Book" ) }}
</li>
What I would like to do:
<li>
{{ HTML::link_to_route(
"books_new",
"<span class='icon-book'></span>New Book"
) }}
</li>
I know this is not the answer you want to hear - but you cannot pass html via link_to_route.
The problem is the output from the HTML class is escaped automatically. So if you try to pass this:
{{ HTML::link_to_route('author','<img src="'.URL::base().'assets/images/image.jpg" alt="icon" />')) }}
it comes out like this:
<img src="http://laravel3.dev/assets/images/image.jpg" alt="icon" />
which will just be text on the screen - no image. Instead you need to use URI::to_route('author') and generate the link yourself. So make a helper a like this (not tested):
function link_to_route_image($route, $image)
{
$m = '<a href="'.URL::to_route($route).'">'
. '<img>'.$image.'</img>'
. '</a>';
return $m;
}
How about something like this?
<li>
<span class='icon-book'></span>New Book
</li>
If you're using "Font Awesome", just adding the class to anchor tag as someone mentioned would be fine for most cases because "Icon classes are echoed via CSS :before". You might need a bit of adjustment in CSS; but it might be better in terms of semantic mark-up.
<a href="{{ URL::route('empdelete', array('id' => $employee->id)) }}">
<img src="{{ asset('images/tick-red.jpg') }}" alt="DRC" id="DRCS-logo" /></a>
You can not have HTML markup with HTML::.... (class) , in the documentation they say that anything that is passed as a parameter to the class is escaped with an HTML entity function to make front-end safer!
You can include font awesome or icon into Laravel Blade Template using this code, i already use and work perfect.
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>Edit
If you're using "Font Awesome", just adding the class to anchor tag as someone mentioned would be fine for most cases because "Icon classes are echoed via CSS :before".
So this is working for me:
<li>
{{ HTML::link_to_route( "books_new", "New Book", null, ['class' => 'fa fa-edit'] ) }}
</li>
So far as I know, Laravel doesn't allow you to do that. To me, it seems out of standards.
Rather, apply a class called icon-book to your anchor tag, and then use the class to put the icon inside your anchor as a 'background-image`.
HTML::link_to_route('books_new', 'New Book', array('class' => 'icon-book'))
Alternatively:
Insert the span tag inside the li tag
Assign the icon-book class to the li tag