I am working with a navigation menu, and wondering how to put multiple classes in a li tag:
This is the li tag
<li class='pil' class='dropdown'>
And this is also what I want in the li tag:
class='{{ ($aktiv == 'dagvakt') ? 'active' : '' }}'
I tried this and it didn't work:
<li class='pil' class='dropdown' class='{{ ($aktiv == 'dagvakt') ? 'active' : '' }}'>
You can add multiple classes to an element by putting them all in the same class attribute and separating them with a space. For example:
<li class='pil dropdown {{ ($aktiv == 'dagvakt') ? 'active' : '' }}'>
As far as I know, the spec only allows class to be declared once, so trying <li class='ex' class='am' class='ple'> won't work.
Only one of each attribute can exist at one time, it should be a space-separated list of classes. Try this:
<li class="pil dropdown {{ ($aktiv == 'dagvakt') ? 'active' : '' }}">
Also careful using quotes ' inside quotes, it's a good idea to use double quote " to assist syntax highlighting and to avoid any conflicts.
Related
I'm currently running into a problem where I am trying to make a li tag have specific classes based on a Ruby variable by using a ternary operator:
<li class=<%= loc == #ruby_var ? "nav-item active" : "nav-item" %>>
...
</li>
I expect the results to be an li element with both the nav-item and active classes if #ruby_var is true:
<li class="nav-item active">
...
</li>
However, for some reason, I am getting unexpected results where it only sets the class to the first part of the string that is in the ternary operator, and leaves the second part outside of the class tag:
<li class="nav-item" active>
...
</li>
I have tried using more than one space in my "nav-item active" string but any white space seems to make the class only accept the first elem in the string.
What is the proper way to use the ternary operator to set an HTML tag's classes?
You can write it like this
<li class="<%= loc == #ruby_var ? "nav-item active" : "nav-item" %>">
# ...
</li>
Note the " outside of the erb expression.
Or you can use tag helper like this
<%= tag.li, class: ["nav-item", (:active if loc == #ruby_var)] do %>
# ...
<% end %>
I like the second option better because I prefer not to mix HTML and ERB when describing a tag.
This question is an Angular specific.
I am writing an Angular program and in my template (html) I need to read the content of id' attribute, from within the same tag.
Below is a very simplified example that checks if id has a value named 'good', and then assigns class a value named 'active'.
<li id="good" [className]=" [id] == 'good' ? 'active' : '' "><li>
This is not working. Could you please tell me how you could do this in Angular?
I have three ways to achieve the same goal.
Use ts variable
<li [id]="id"
[className]="id == 'good' ? 'active' : '' ">
Use ts variable
</li>
Use template reference variable
<li id="good"
#li
[className]=" li.id == 'good' ? 'active' : '' ">
Use template reference variable
</li>
Use css selector
<li id="good" class="good-css" >
Use css selector
</li>
.good-css[id=good] {
color: blue
}
https://stackblitz.com/edit/angular-anowbm?file=src/app/app.component.html
Hope to help you.
You can try like this:
Typescript:
id = 'good'
Template:
<li [id]="id"
[class]="id == 'good' ? 'active' : '' ">
<li>
I am using Laravel 5.0, and I would like to make the class of an element 'active' if the url contains the word 'dashboard'. I was able to achieve this in Laravel 5.4 as:
<li class="{{request()->is('dashboard') ? 'active':'inactive'}}">
But this does not work in Laravel 5.0. Can someone provide a solution which would work?
A really clean solution would be creating a helper function to help you like so:
function set_active($uri)
{
return Request::is($uri) ? 'active' : 'inactive';
}
and then in your blade file:
<li class="{{set_active('dashboard')}}">
If you want to check if the url CONTAINS dashboard you need to add some wild cards. right now you're just checking that the path IS dashboard. The example below will set class active any time the path starts with admin/hub
<li class="{{ Request::is('admin/hub*') ? 'active' : '' }}">
<a href="{{ url('admin/hub') }}" id="hub">
<i class="fa fa-desktop"></i> <span>Hub</span>
</a>
</li>
If you want to set the class if the request contains dashboard ANYWHERE use
Request::is('*dashboard*') ? 'active' : ''
You can try something like this:
#if (strpos(Request::url(), 'dashboard') !== false)
<li class="active">
#else
<li class="inactive">
#endif
<li class=<%= #page_name == "home" ? "active span2" : "span2" %>>
turns into:
<li class="active" span2>
When the statement evaluates true.
My expected result is:
<li class="active span2">
Any ideas why this happens?
The quotes within your tags are essentially declaring the contents within as String objects. The output of the statement is a string, but the string will not be encapsulated in quotes. The value of the class attribute must be in quotes in order for the markup to be valid. Subsequently, you'll need to enclose the entire statement within double quotes:
<li class="<%= #page_name == 'home' ? 'active span2' : 'span2' %>">
The output of your statement is actually
<li class=active span2>
which will be turned to your output by most browsers, in an effort to correct invalid markup.
You'll want to have it render this way:
<li class="<%= #page_name == "home" ? "active span2" : "span2" %>">
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