I am using reactjs and assume that I have a list of items like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
And I want change the class with styled-components. If a click 'Item 1', I want to give a style to it and if I click the other one, I want to remove active class from 'Item 1' and give it to 'Item 2'
Is it possible with styled-components?
You can do something like
<ul>
<li className={`class1 ${this.state.isItem1Active ? "active" : ""}`}>Item 1</li>
<li className={`class1 ${this.state.isItem2Active ? "active" : ""}`}>Item 2</li>
</ul>
Now the className class1 will be applied to both the Items and the className active will be applied only to the element which is active
Related
I list my categories with wp_list_categories().
When there are subcategories, the result/html gives by default :
<ul>
<li>category parent</li>
<ul class="children">
<li>category children</li>
</ul>
</ul>
I would like to remove the ul list for the catégories children, to have a simple list of categories:
<ul>
<li>category parent</li>
<li>category children</li>
</ul>
Do you know how can it be done?
The easiest way is using jQuery
var innerUl = $(".children").html();
$(".children").remove();
$("ul").append(innerUl);
Or you can use .unwrap(), it would be a better solution.
I have the following array / sub array structure
"filters": {
"types": {
"34": "Ford",
"22": "Jeep",
"18": "Porsche",
},
"locations": [
"Earth",
"Mars",
"Moon",
]
}
and the following handlebars template
{{#if filters}}
{{#each filters}}
<div class="cars">
<ul class="cars__list">
<li class="cars-{{#key}}__title">Filter by {{#key}}:</li>
<li class="cars-{{#key}}__filters">
<ul>
<li class="cars-{{#key}}">View All</li>
{{#each this}}
<li class="cars-{{*want to access filters[key]*}} color={{#key}}">{{this}}</li>
{{/each}}
</li>
</li>
</ul>
</div>
{{/each}}
{{/if}}
I'm having trouble accessing the filters[types] and filters[locations] within the each this loop.
In my CSS I'm using a classes called .cars-type and .cars-location. I want to be able to style each list separately and unfortunately target each li with a class. I want to apply these styles within the each this loop.
I can do it within the filters loop by using {{#key}} but not in the each this loop
I've tried
<li class="cars-{{../filters}}">{{this}}</li>
but this just returns the car type like ford - I want the key ie. '34' in this case
<li class="cars-{{lookup ../filters #index}}">{{this}}</li>
using handlebars helper lookup but again no luck
<li class="cars-{{../this}}">{{this}}</li>
and the above which gives me [object Object]
I've checked out handlebars - is it possible to access parent context in a partial?, handlebars.js: relative paths in partials not working and Lookup helper in handlebars but no luck with any of the solutions
EDIT Here's the HTML output that I want to produce
<div class="cars">
<ul class="cars__list">
<li class="cars-types__title">Filter by types:</li>
<li class="cars-types__filters">
<ul>
<li class="cars-types">View All</li>
<li class="cars-types color-34">Ford</li>
<li class="cars-types color-22">Jeep</li>
<li class="cars-types color-18">Porsche</li>
</ul>
</li>
</ul>
<ul class="cars__list">
<li class="cars-locations__title">Filter by locations:</li>
<li class="cars-locations__filters">
<ul>
<li class="cars-locations">View All</li>
<li class="cars-locations color-0">Earth</li>
<li class="cars-locations color-1">Mars</li>
<li class="cars-locations color-2">Moon</li>
</ul>
</li>
</ul>
</div>
You should reconsider your HTML because a ul cannot be a direct child of another ul. See https://developer.mozilla.org/en/docs/Web/HTML/Element/ul#Usage_context
With that said, we can solve your problem. The Handlebars docs have our answer:
Nested each blocks may access the interation variables via depth based
paths. To access the parent index, for example, {{#../index}} can be
used.
Therefore, your problematic line should look like the following:
<li class="cars-{{#../key}} color-{{#key}}">{{this}}</li>
Not sure if the is the appropriate use of handlebars - I've been digging around the web and haven't come up with much. Anyway, I'm using assemble.io and trying to set up a partial to repeat around my site. I have a moduleResources.hbs in my /partials directory. Inside that I have this code:
<div class="dvp-content-well">
<div class="content-well-inner">
<h4>Related Resources</h3>
<ul class="fa-ul">
<li><i class="fa-li fa fa-file-o"></i>List Item 3</li>
<li><i class="fa-li fa fa-play-circle-o"></i>List Item 1</li>
<li><i class="fa-li fa fa-cog"></i>List Item 2</li>
</ul>
</div>
</div>
That code block could be called one to two times on a page. Basically, what I need to do is change the content of the <h4> and <ul> dynamically. And was hoping I could do so when calling the partial on the page. So like {{> moduleResources relatedResources }}
Like having all the HTML in the partial but changing it based on context like:
<div class="dvp-content-well">
<div class="content-well-inner">
<!-- IF Related -->
<h4>Related Resources</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-file-o"></i>List Item 1</li>
<li><i class="fa-li fa fa-play-circle-o"></i>List Item 2</li>
<li><i class="fa-li fa fa-cog"></i>List Item 3</li>
</ul>
<!-- If Mentioned -->
<h4>Resources Mentioned in this Article</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-file-o"></i>List Item 1</li>
<li><i class="fa-li fa fa-play-circle-o"></i>List Item 2</li>
<li><i class="fa-li fa fa-cog"></i><a href="#">List Item 3/a></li>
<li><i class="fa-li fa fa-file-o"></i>List Item 4</li>
<li><i class="fa-li fa fa-play-circle-o"></i>List Item 5</li>
<li><i class="fa-li fa fa-cog"></i>List Item 6</li>
</ul>
</div>
</div>
I had originally set YAML variables like resources-title: Related Resources but you can see if I use the module twice and each version needs to have a different title (and ul content) ... what then?
Is that even a reasonable use scenario for handlebars/assemble?
Thanks!
I think what you're thinking is correct. You can pass a different context to the partial and use handlebars templates to populate the html based on the context. You might even want to split it down to smaller pieces:
{{!list-item.hbs}}
<li><i class="fa-li fa fa-{{icon}}"></i>{{text}}</li>
{{!list.hbs}}
<ul class="fa-ul">
{{#each items}}{{> list-item . }}{{/each}}
</ul>
{{!resources.hbs}}
<div class="dvp-content-well">
<div class="content-well-inner">
<h4>{{title}}</h4>
{{> list .}}
</div>
</div>
{{!my-page.hbs}}
{{> resources resources.related}}
{{> resources resources.mentioned}}
# resources.yml
related:
title: Related Resources
items:
-
icon: file-o
url: "#"
text: List Item 1
-
icon: play-circle-o
url: "#"
text: List Item 2
-
icon: fa-cog
url: "#"
text: List Item 3
mentioned:
title: Resources Mentioned in this Article
-
icon: file-o
url: "#"
text: List Item 1
-
icon: play-circle-o
url: "#"
text: List Item 2
-
icon: fa-cog
url: "#"
text: List Item 3
-
icon: file-o
url: "#"
text: List Item 4
-
icon: play-circle-o
url: "#"
text: List Item 5
-
icon: fa-cog
url: "#"
text: List Item 6
I have this block and I want to include it in some pages
<ul class="nav nav-tabs padding-18">
<li class="active">
Profile
</li>
<li>
Edit
</li>
<li>
Friends
</li>
</ul>
The first tag < li > has class named "active" , how can I applicate this class dynamically for the second or third tag < li > when I change the page ?
Compare the current route against the link's one and add the active class if it matches.
Use the ternary operator for a nice short syntax:
<li{{ (app.request.attributes.get('_route') == 'fos_user_profile_show') ? ' class="active"' }}>
Please help me solve my big problem.
in my on-line shopping project i created a dynamic Category List (with Infinite Level Depth) Implemented in a Single Table in DB with Self join.
the schema is like below:
(source: aspalliance.com)
Update
I want to use a JQuery plugin to make a Multi Level Menu bar. this plugin uses <ul> and <li> elements so I should transform the DB table to <ul> and <li>. the result should like this:
<ul>
<li>Clothing 1
<ul>
<li>Trousers 2
<ul>
<li>Mens trousers 3</li>
<li>Ladies trousers 3</li>
</ul>
</li>
<li>Jackets 2</li>
<li>Shirts 2</li>
<li>Shoes
<ul>
<li>Mens shoes 3
<ul>
<li>Mens formal shoes 4</li>
<li>Mens casual shoes 4</li>
</ul>
</li>
<li>Kids shoes 3</li>
<li>Ladies shoes 3</li>
</ul>
</li>
</ul>
</li>
<li>Cars 1
<ul>
<li>Small cars 2</i>
</ul>
</li>
</ul>
I can use a nested data control(like repeater control) but you know, with this solution i just can implement a list with non-infinite hierarchical tree structure.
please help me! any suggestion?? I googled the web but not a suitable way found. I use ASP.net 3.5 and LINQ.
what is the best way?
Use this recursive method
private string GenerateUL(IQueryable<Menu> menus)
{
var sb = new StringBuilder();
sb.AppendLine("<ul>");
foreach (var menu in menus)
{
if (menu.Menus.Any())
{
sb.AppendLine("<li>" + menu.Text);
sb.Append(GenerateUL(menu.Menus.AsQueryable()));
sb.AppendLine("</li>");
}
else
sb.AppendLine("<li>" + menu.Text + "</li>");
}
sb.AppendLine("</ul>");
return sb.ToString();
}
like this
DataClasses1DataContext context = new DataClasses1DataContext();
var s = GenerateUL(context.Menus.Where(m => m.ParentID == null));
Response.Write(s);
I think ASP.NET TreeView is your friend.
Take a look here too.
Also, you might want to use a dynamically created nested DataGrid or Repeater, here is an example (you can make it dynamic, so the nested (or even the parent) repeaters are genenerated programmatically.
void GenerateChildren(Menu menu)
{
//Create DataGridRow/RepeaterRow/TreeViewNode/whatever for this menu
menu.Children.Load();
foreach (var child in menu.Children)
{
GenerateChildren(child);
}
}
Update
See example 5 on this page.
I would recommend generating the jQuery code by server, so it's easier for you to control both the menus and the jQ generated menus.