something like <div class="submenu" v-if="SUB_CATS> or v-if="SUB_CATS !== 0" doesnt work, please
help me understand
now on hover i have empty div, if there no subcats
<ul class="menu-categories">
<li class="menu-item" v-for="category in MAIN_CATS"
:key="category.id">
<nuxt-link :to="`/category/${category.id}`" class="menu-button">
{{ category.title }}
</nuxt-link>
<div class="submenu">
<ul class="menu-sub-list">
<li class="menu-item"
v-for="sub in SUB_CATS(category.id)"
:key="sub.id">
<nuxt-link :to="`/category/${sub.id}`" class="menu-button">{{ sub.title }}</nuxt-link>
</li>
</ul>
</div>
</li>
</ul>
Related
The following renders a header text and some child elements.
What I would like to accomplish is that the child elements toggle (hide/unhide) when the header is clicked. So in below example, when Spanish01 is clicked, all its children should be hidden and when its clicked again the should reappear.
I tried to find a similar case on the internet but could not find any. All help is welcome
<div id="dashboard">
<ul class="collection with-header">
<li class="collection-header"><h4>Cards</h4></li>
<li v-for="card in cards" v-bind:key="card.id" class="collection-item">
<div class="chip">{{card.group_name}}</div>
<ul class="collection with-header">
<li v-for="(value, index) in card.group" v-bind:key="index" class="collection-item">
<ul>
<li>
front: {{value.front}}
</li>
<li>
back: {{value.back}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
You can simply put an extra variable on each of your cards. Then you can do something like this:
<div id="dashboard">
<ul class="collection with-header">
<li class="collection-header"><h4>Cards</h4></li>
<li v-for="card in cards" v-bind:key="card.id" class="collection-item">
<div class="chip" #click="card.shown = !card.shown>{{card.group_name}}</div>
<ul class="collection with-header" v-show="card.shown">
<li v-for="(value, index) in card.group" v-bind:key="index" class="collection-item">
<ul>
<li>
front: {{value.front}}
</li>
<li>
back: {{value.back}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Obviously, you have to alter your variable cards so it contains the shown attribute by default. As an alternative, you can set up a different variable that contains the shown status and use some unique id to look up the value instead.
I am using getuikit's tab component ( https://getuikit.com/docs/tab ) in my Vue-App:
Now I see that every tab is active, if I use v-for to iterate through an array.
<ul class=" uk-tab-left" uk-tab>
<li v-for="test in tests" id="test">{{ test }}</li>
</ul>
In my codepen example you can see, that the class uk-active is always inserted automatically:
https://codepen.io/spqrinc/pen/Ydzbez
Is there a possibility to change this behavior?
You can add a empty li element before the loop to make sure the active class will not be added to the others.
Don't forget to add a key to the loop and bind the id.
<div id="app">
<div>
<div uk-grid>
<div class="uk-width-1-4#m">
<ul class=" uk-tab-left" data-uk-tab>
<li></li>
<li v-for="test in tests" :key="test" :id="test">
{{ test }}
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="app">
<div>
<div uk-grid>
<div class="uk-width-1-4#m">
<ul class=" uk-tab-left" data-uk-tab>
<template v-for="test in tests">
<li :key="test" :id="test">
{{ test }}
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
I seem to be able to find the question posted on here and google about the same issue in bootstrap, but i'm not able to find answers for the same issue in Materialize
I'm new to bootstrap and everything i've tried hasn't solved it. I'd be grateful if anyone knows why it's doing this and how to override it.
Thank you!
the live page is here
i've set drop downs to fire on 'about' and 'profile'
the script:
<script>
var $ = jQuery;
(function($){
$(function(){
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false,
hover: false,
alignment: 'right',
gutter: 0,
belowOrigin: true,
});
$('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
}); // end of document ready
})(jQuery); // end of jQuery name space
</script>
nav bar:
<nav>
<div class="nav-wrapper">
<a class="brand-logo hide-on-med-and-down left" href="http://focallocal.org">Focallocal</a>
<ul class="hide-on-small-and-down left">
<li class="text-icon">
<a class="dropdown-button" href="http://about.focallocal.org" data-activates="nav-about" title="About Us">
<i class="mdi-action-info"></i>
<span>About Us</span>
</a>
</li>
<li class="text-icon">
<a href="http://news.focallocal.org/" title="Happy News">
<i class="mdi-device-brightness-high"></i>
<span>Happy News</span>
</a>
</li>
<li class="text-icon">
<a href="http://action.focallocal.org/" title="Action">
<i class="mdi-action-get-app"></i>
<span>Action Centre</span>
</a>
</li>
<li class="text-icon">
<a href="http://activities.focallocal.org" title="Activities">
<i class="mdi-maps-directions-walk"></i>
<span>Activities</span>
</a>
</li>
<li class="text-icon">
<a href="http://gather.focallocal.org/" title="Gather">
<i class="mdi-image-flare"></i>
<span> Gather </span>
</a>
</li>
<li class="text-icon">
<a href="http://shop.focallocal.org/" title="Shop">
<i class="mdi-action-shop-two"></i>
<span> Shop</span>
</a>
</li>
<li class="text-icon">
<a class="dropdown-button" href="#" data-activates="nav-projects" title="Projects">
<i class="mdi-action-info"></i>
<span>Projects</span>
</a>
</li>
</ul>
<ul class="right">
<li class="text-icon">
<a href="http://discuss.focallocal.org" target="_blank" title="Chat">
<i class="mdi-communication-dialpad"></i>
<span>Discuss</span>
</a>
</li>
<li class="text-icon">
<a href="https://trello.com/invite/b/SwMdGGcX/dbf6c3cebca7e2214ac0df3a57b1881f/build-the-movement" target="_blank" title="Missions">
<i class="mdi-content-create"></i>
<span>Missions</span>
</a>
</li>
<li class="text-icon">
<a href="#" title="coming soon">
<i class="mdi-action-perm-media"></i>
<span>Profile</span>
</a>
</li>
</ul>
<ul id="user-dropdown" class="dropdown-content">
<li>Log in</li>
<li>Register</li>
</ul>
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
</div>
</nav>
dropdowns:
<ul id="nav-about" class="dropdown-content">
<li>
About Us
</li>
<li>
Hire Us
</li>
<li>
Community Values
</li>
<li>
F.A.Q
</li>
<li>
The Road to Focallocal
</li>
<li>
Will we Succeed?
</li>
<li>
Focallocal in the news
</li>
<ul id="nav-projects" class="dropdown-content">
<li>
<a href="http://action.focallocal.org/">Action Center
</a>
</li>
<li>
<a href="http://brightertomorrowmap.com/">Brighter Tomorrow Map
</a>
</li>
<li>
<a href="http://morehappiness.focallocal.org/">More Happiness
</a>
</li>
I have searched high and low for the answer but to no avail. I have a sandbox website www.bluestackbrewing.com
When you resize it to mobile, the first two lists in the menu item are showing. Does anyone know how to fix this? Thank you for any response.
<div class="row nav-menu">
<div class="col-sm-3 col-md-2 columns">
</div>
<div class="col-sm-9 col-md-10 columns">
<ul class="menu navbar-collapse">
<li>Home
</li>
<li class="has-dropdown">Pronorm German Kitchens
<ul class="subnav">
<li>Y-LINE</li>
<li>X-LINE</li>
<li>PROLINE</li>
<li>CLASSICLINE</li>
</ul>
</li>
<li>BESPOKE KITCHENS
</li>
<li>STORAGE SOLUTIONS & ACCESSORIES
</li>
<li>Contact
</li>
</ul>
<ul class="social-icons text-right">
<li>
<a href="#">
<i class="icon social_twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon social_facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon social_instagram"></i>
</a>
</li>
</ul>
</div>
I am looking at a way to add a class dynamically to aurelia template. I have to add an active class if the particular li is visible.
Example
<section id="jobsCategoryContainer" class="jobsCategoryContainer">
<h1>{{title}}</h1>
<div *ngFor = "#slide of jobCategorySlides; #i = index" id="job-category-slide_{{i}}" class="job-category-slide" [ngClass]="{active: initialCarouselIndex == i}">
<ul *ngFor = "#item of slide">
<li class="jobDetails" *ngFor="#job of item; #i = index">
<div>
<span id="{{job.name}}" class="jobName">{{ job.name }}</span>
</div>
<div>
<span>{{job.noOfJobs}}</span>
</div>
</li>
</ul>
</div>
<div>
Previous
Next
</div>
</section>
I want to add the active class on below code
<div class="phs-widget-body">
<div class="phs-carousel-inner">
<ul repeat.for = "slide of nearByJobSlides" class="phs-item phs-grid-row" >
<li repeat.for = "item of slide" class="phs-small-6">
<a href="javascript:void(0)">
<div class="phs-job-title">${item.title}</div>
<div class="phs-job-info">
<span class="phs-job-loacation">${item.location}</span>
<span class="phs-job-category">${item.category}</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="phs-widget-footer">
<a class="left" href="#phsNearbyJobs" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i> Move to Previous
</a>
<ol class="phs-carousel-indicators">
<li repeat.for = "slide of nearByJobSlides" data-target="#phsNearbyJobs" data-slide-to="${$index}" class="" click.trigger="changeActiveClass()"></li>
</ol>
<a class="right" href="#phsNearbyJobs" role="button" data-slide="next">
Move to Next <i class="fa fa-angle-right"></i>
</a>
</div>
As well how do I pass an event Object on aurelia?
Just use interpolation
<div class="${ applyMyClass ? 'my-class' : '' }">
E.g.
<div class="${ carouselIndex == $index ? 'active' : '' }">
You don't need to do this with a click event, it's the same as ng2 (only less code!)