I have pagination like below. I would like to highlight page number 2 for both the below links.
[routerLink]="['/link/sublink2']
[routerLink]="['/link/sublink22']
How to achieve this using angular 2.
<ul class="pagination pagination-plain">
<li [routerLinkActive]="['active']">
<a [routerLink]="['/link/sublink1']">1</a>
</li>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/link/sublink2']">2</a>
</li>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/link/sublink3']">3</a>
</li>
</ul>
In your html,
<li [class]="addActiveClass()" >
<a [routerLink]="['/link/sublink2', '/link/sublink22']">2</a>
</li>
and in your component.ts file,
private addActiveClass() {
let fullpath:any[]=this.router.url.split("/")
if(fullpath[2] == 'sublink2' || fullpath[2] == 'sublink22'){ /* fullpath[2] has the second parameter after the '/'. If you want first parameter after the slash, use fullpath[1] */
return 'active';
}else{
return '';
}
}
This adds an active class to the li when you route to the page. You can highlight the li.active using css.
Related
I am trying to hide an element until its previous sibling is hovered over, in css (or scss rather), it looks like this:
.menu-container {
// style with flex etc...
& .menu-item-link {
// style the link...
&+.sub-menu-container {
display: none;
}
&:hover+.sub-menu-container {
display: block;
}
}
}
<ul class="menu-container">
<li class="menu-item-container">
<a class="menu-item-link">Ingredients</a>
<ul class="sub-menu-container">
<li class="sub-menu-item-container">
<a class="sub-menu-link">Fruits</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Vegetables</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Dairy</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Children</a>
</li>
</ul>
</li>
</ul>
How do I achieve this using tailwind?
You're not actually trying to target a sibling in your code, you're trying to target a child element. This is a very simple process when you just want to show a sub-menu dropdown.
Just add group to the hover trigger (.menu-item-link in your case) and group-hover:[some-display-class] to the child. This way the child will change it's display property when the parent element (or itself) is hovered.
You should change your title, also I'd recommend that you don't use Tailwind with class names like that. Please see extracting components for the recommended way to use Tailwind CSS. Of course, you are free to use it how you want but you're better off with plain old CSS if you want to use SCSS and classes like that.
Example with your structure:
<ul>
<li class="group">
<a>Ingredients</a>
<ul class="hidden group-hover:block">
<li>
<a>Fruits</a>
</li>
<li>
<a>Vegetables</a>
</li>
<li>
<a>Dairy</a>
</li>
<li>
<a>Children</a>
</li>
</ul>
</li>
</ul>
Example on Tailwind Play https://play.tailwindcss.com/dFc2zlmqDA
I'm having a problem with a dropdown list. Here is the HTML code I got.
Screenshot: http://i.imgur.com/zIAhQkj.png
<nav>
Hjem
<ul>
<li class="nav_link">
<a onclick="extern_link_warning()" class="dropdown_hover"
href="http://bbc.com">Innleveringer</a>
<ul class="preview_box">
<li>
<a onclick="extern_link_warning()" href="http://bbc.com">Link 1</a>
</li>
<li>
Link 2
</li>
</ul>
</li>
<li> Om meg </li>
<!-- Kun admin brukere ser disse sidene: -->
<?php
if ($isLoggedIn){
echo '<li> Admin </li>';
}
?>
</ul>
</nav>
My CSS code for the dropdown:
.preview_box {
display: none;
}
a:hover + .preview_box,.preview_box:hover {
display: block;
}
The code above works, but the problem is that I want the ".preview_box" to appear when hovering a ".nav_link" tag instead of an "a" tag, but I can't get it to work. This is what I've tried:
.nav_link:hover + .preview_box, .preview_box:hover {
}
.nav_link:hover + .nav_link .preview_box, .nav_link .preview_box:hover {
}
Any ideas how I can get this to work?
Well after reading and reading your questions I think what you want is when you hover the li with the class nav_linkyou want to appear the .preview-box instead of hovering the anchor inside it...
Well, this should fix the problem...
.nav_link:hover .preview_box {
display: block;
}
I have a list generated by ngRepeat, like so
<ul class="list-group">
<li class="list-group-item" ng-repeat="data in tree | filter:key">
{{data.name}}
</li>
</ul>
and I want the first item in the list to have rounded corners. I have a style such as
.first-item {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
How can I cause this style to be applied to the first visible item? Note that the key is connected to a search box, so the first item is dynamic.
use $first, that represents the first iteration within a ng-repeat
<ul class="list-group">
<li ng-class="{'first-item':$first}"
class="list-group-item" ng-repeat="data in tree | filter:key">
{{data.name}}
</li>
</ul>
edit: since first-item has a dash, it must be in quotes
You can use the css rule first-child:
.list-group li:first-child {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
http://www.w3schools.com/cssref/sel_firstchild.asp
Pure Angular Way would be:
<ul class="list-group">
<li class="list-group-item" ng-repeat="data in tree | filter:key track by $index" ng-class="{MyClassName: $index == 0}">
{{data.name}}
</li>
</ul>
or see answer of Sasi Kiran ;)
You can use the $index variable value to do such conditional formatting within ng-repeat. Here's an example:
<ul class="list-group">
<li class="list-group-item"
ng-repeat="data in tree | filter:key"
ng-class="{'first-item': $index == 0}">
{{data.name}}
</li>
</ul>
Use $first and ng-class. $first is a property which is exposed on the local scope, for each item in the repeated list. It's value is true if the item is the first one in the repeated list. The HTML should look something as below:
<ul class="list-group">
<li class="list-group-item" ng-repeat="data in tree | filter:key" ng-class="{'.first-item': $first}">
<div>{{data.name}}</div>
</li>
I have a bunch of incremented elements
<ul>
<li id="idTab1">
<li id="idTab2">
<li id="multiTab1">
<li id="multiTab2">
<li id="multiTab3">
<li id="idTab3">
</ul>
Is there some CSS selector method for me to select all 'multiTab' elements? something like 'li #multiTab*' ? :P
You can use ^=, example:
li[id^="mulitiTab"]
I have a question about my menu. I have a menu with 6 items, which I want to give a different colour if they are ACTIVE (so in use by my users). I tried this already:
<nav id="sub-navigation" class="toggles-menu">
<ul id="quick-index-nav" role="navigation" class="pills slim muted">
<li>
<a id="qindex-day">abc</a>
</li>
<li>
<a id="qindex-day">random</a>
</li>
<li<? if(!$_GET['t']||$_GET['t']=='') echo ' class="active"';?>>
<a id="qindex-popular" target="right" href="right.php">all of them</a>
</li>
<li<? if($_GET['t']=='tod') echo ' class="active"';?>>
<a id="qindex-today" target="right" href="right.php?t=tod">today</a>
</li>
<li class="yesterday<? if($_GET['t']=='yes') echo ' active"';?>">
<a id="qindex-yesterday" target="right" href="right.php?t=yes">yesterday</a>
</li>
<li<? if($_GET['t']=='mix') echo ' class="active"';?>>
<a id="qindex-day" target="right" href="right.php?t=mix">samba</a>
</li>
</ul>
</nav>
CSS:
.pills>li.active>a{color:#fff}
.pills.slim>li>a{padding:3px 5px;}
.pills.muted>li>a{color:gray}
.pills.muted>li.active>a{color:#fff}
But this won't work. It makes nothing active if I click on them.
You need to add styles to your page, either via an external stylesheet or embedded in a style tag directly in the page.
CSS:
li.active a{
color: red; // for example
}
You can also use inline styles:
<li<? if(!$_GET['t']||$_GET['t']=='') echo ' style="color: red;"';?>>
It will work but is not recommended.