I have a webpage built in Angular 2. The routes in the navbar are being handled through Angular's router. I have a <main> area where all the child components appear through each respective route which acts as a flexbox container. However, I want each flex-child/router component to have a different flex arrangement.
The problem is that I can't determine the organization of the flex-child until each particular routerLink is active. However, I can't style the child element's flex-position in its own component styles; you have to do that through the flex-container, in this case <main>. For example, consider this nav:
<ul>
<li class="dropdown">
About
<ul class="dropdown-content">
<li routerLink="/members">Members</li>
<li routerLink="/history">History</li>
</ul>
</li>
<li routerLink="/media">Media</li>
<li routerLink="/merch">Merchandise</li>
<li routerLink="/aaru">AARU</li>
</ul>
<main>
This is where my ng-components go
<router-outlet></router-outlet>
</main>
This template is in my main component AppComponent. Let's say I want /members to be styled as { justify-content: center } but /merch to be { justify-content: flex-start }.
Is there a way in Angular I can specify the style/toggle css classes on <main> once I click the appropriate routerLink?
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 am new to BEM and working on a sample template:
HTML
<header class="header">
<div class="header__branding">
<h1>Site branding</h1>
</div>
<div class="header__menu">
<nav class="main-menu">
<ul class="main-menu list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</nav>
</div>
</header>
<footer class="footer">
<div class="footer__links">
<ul class="???? list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</div>
</footer>
CSS
.main-menu .list{
// styles here
}
.list__item{
// styles here
}
.list__item-link{
// styles here
}
.list__item-link--active{
// styles here
}
So my questions is, what is the best way to name lists and how best to organize the CSS? I got stuck in the footer, I added a ???? if someone can help me think of a better name for the footer links?
I am finding it hard to wrap my head around BEM, but I should not nest more than one element at a time right?
Think about BEM as reusable component that can be placed many times on site in different places.
In this case you don't need any more class in only 'list'. Both in header and footer.
If you need any modification you could use somethig like: 'list list--wider' or so. And this second class change only width of element.
And one more: list__item-link is wrong. Parent is 'list__item' so this should be named 'list__item__link' BUT you also could name it just 'anchor' or 'link' and you will be able reuse them all around site on <a> elements.
I would like to have a mouse-over that highlights my li using the themed bootstrap color. However, list-group-item is overriding the background style to white.
This is for a component that will be used by multiple people and who knows what they will set their bg-primary as? So I don't really want to force a specific color.
Is there any way to override the cascade for this case and have bg-primary override list-group-item instead of the other way around?
Here is a fiddle showing the problem:
https://jsfiddle.net/scottieslg/5bqtr8dn/1/
<div class='container'>
<ul class='list-group'>
<li class='bg-primary list-group-item'>Test1</li>
<li class='list-group-item'>Test2</li>
<li class='list-group-item'>Test3</li>
</ul>
</div>
I don't want it to dropped below When it becomes a width of Mobile
I want it to be only horizontally
HTML
<div class="nav nav-pills nav-tabs nav-justified">
<li class="active"><a href=''>Home</a></li>
<li>
<a href=''>link</a>
</li>
<li><a href=''>Link 2</a></li>
</div>
Demo
https://jsfiddle.net/mnzsov5z/2/
You can always just override the bootstrap styles with your custom ones. The only thing you would want to do is adding a new class that adds
display: table-cell;
width: 1%;
to the .nav-tabsat>li list element at all resolutions. see updated fiddle:
https://jsfiddle.net/mnzsov5z/3/
It looks like "nav-justified" is not supported by bootstrap anymore. Remove that and let me know if that works.
Situation, such a menu:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
When I hover "LANGUAGES" I need to show up the other :
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
Necessary to make it work on CSS, JQuery or without JavaScript. Here's a version does not work:
.hover_top_right_menu {
display: none;
}
It's a wrong line
.top_right_submenu: hover, hover_top_right_menu {
display: visible;
}
You have some typos in your css
by default the element .hover_top_right_menu should have display: none. When you hover the submenu then you change its display (with display: block).
.hover_top_right_menu {
display: none;
}
.top_right_submenu:hover .hover_top_right_menu {
display: block;
}
Anyway this css is based on the assumption that the language list is nested into .hover_top_right_menu element, e.g.:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
As a side notes:
Unless you need to have an action on click event, the link around "LANGUAGES" is not necessary for the example
you're using empty markup, probably for styling purpose only. If you need to have an icon just place it as a background of that list-item (or as content property of its :before pseudoelement)