I'm trying to developp a sidebar of a documentation who it links to elements on th same page
<div class="mt-6">
<li class="relative">
<router-link class="menuItem-active-link" to="#users">
{{$t('navigation.users')}}
</router-link>
</li>
<li class="relative">
<a href="#advanced" class="menuItem-active-link" >
{{$t('navigation.advanced')}}
</a>
</li>
</div>
when I use the a tag I can navigate between each elements but I didn't know how styling the active link
And when I use router-link the URL change but the page stay on the current element, it does'nt go to the specified element on to attribute. And with router-link I can styling the active link easly:
.router-link-exact-active.menuItem-active-link{
background-color: cyan;
}
Have you any idea to solve this problem ?
This should work
<router-link :to="{ hash: '#users' }">{{ $t('navigation.users') }}</router-link>
Similar to this answer.
Related
I am creating a side menu bar, and I want to highlight name of page user is currently active on. Something like this:
I have successfully managed to do that, but style I defined is taking effect on all the links throughout the website, which is causing a lot of problem.
If I apply <style scoped>, style is not taking effect anywhere. Not even on intended page.
My Component looks something like this..
Menubar.vue
<template>
<ul class="w-56 border bg-base-100 border-none">
<li class="my-4">
<nuxt-link active-class="current-dash-page" to="./general" class="nav-link p-3">General Information</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./announcements" class="p-3">Announcements</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./learners" class="p-3">Manage Learners</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./schedule" class="p-3">Schedule</nuxt-link>
</li>
<li class="my-6">
<nuxt-link to="./danger" class="p-3">Danger Zone</nuxt-link>
</li>
</ul>
</template>
<style>
.nuxt-link-exact-active {
border-radius: 0.5rem;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: hsla(var(--a) / var(--tw-bg-opacity));
color: white;
}
</style>
The problem might be with the values of your to="" arguments. They are relative to the current page, so if you navigate to, for example, "learners" then your url will end with .../learners/ then if you navigate to "danger" your url will change to .../learners/danger/ which will be missed by the exact-active class. Try giving absolute values to to="".
The css class you should be using is router-link-exact-active
Im using Vue and Ionic, this is my code:
I have a page where I have this cards:
<yt-course-card
v-for="lesson in ytTheme.lessons"
:key="lesson"
:name="lesson.group_name"
:lessons="lesson.group_lessons"
></yt-course-card>
in this card i have this:
<ion-card>
<ion-card-header>
<ion-card-title>{{ name }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<ul>
<li v-for="lesson in lessons" :key="lesson">{{ lesson.name }}</li>
</ul>
</ion-card-content>
</ion-card>
This all works and does what I want it to, but I would like this li to be link to other page. I have this other page ready, but I dont know how should I write my router-link, because if I use router-link in -li- element, it doesnt work.
This is how my route-link should look like, but I dont know where or how to put it, so my li element is link to other page.
:router-link="`/yt-course/${lesson.slug}`"
In vue router router-link is not an attribute but a component. To navigate to other pages use the to attribute like show below:
<li :to="{ mame: 'yourRouteName' }">Link to a page</li>
This works fine and all, but it is the best practice to use Vue router's build-in component, like shown below:
<li>
<router-link :to="{ mame: 'yourRouteName' }">Link to a page</router-link>
</li>
I have a menu which is imported to the home and mine page. In home page I passed a data(user_id) to the menu.
<li>
<router-link to="/">
<i></i>
<div class="icon home"></div>
<span class="text">Home</span>
</router-link>
</li>
<li>
<router-link :to="{ path: '/mine', params: {id: user_id} }">
<i></i>
<div class="icon user"></div>
<span class="text">Mine</span>
</router-link>
</li>
On mine page, when I tried to display the params in console, it doesn't show.
but If the passing of data is from home to mine page it works.
I hope you can help me.
Thanks.
Structure
components
menu
views
home
mine
try this
<router-link :to="`/mine/${user_id}`">
to see information about your route try this command
console.log(this.$route)
I have my navigation like this
<nav>
<ul class="nav nav-list">
<router-link tag="li" to="/">Home</router-link>
<router-link tag="li" to="/page1">Page1</router-link>
<router-link tag="li" to="/page2">Page2</router-link>
</ul>
</nav>
I want the link to Page1 to be active when ever am in page1 and same for Page2. It is working fine, the links are been activated when I navigate to the pages BUT the problem is that to link to the root (/) page is always active even when I leave the page.
The root link is always active, because Vue Router partially matches the root / path with the current path.
To perform an exact match you can either:
Add an exact attribute to the router-link:
<router-link tag="li" to="/" exact>
<a href="#">
Home
</a>
</router-link>
Set your active class in the linkExactActiveClass router constructor option instead of linkActiveClass.
I would like to change the active pill/tab on document load. I know you can set the active pill like I have below but for other reasons I want to change it after document load. I have tried various bits of JS but nothing seems to work. Here's the HTML and JS (I have also tried replacing data-toggle="pill" with data-toggle="tab" below and still doesn't work).
<div>
<ul class="nav nav-pills pillstyle">
<li class="active tabstyle"><a data-toggle="pill" href="#apple">Apple</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#banana">Banana</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#pear">Pear</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#orange" >Orange</a></li>
</ul>
</div> <!-- nav pills close -->
<div class="tab-content">
<div id="apple" class="tab-pane fade in active"> `
.... content of tabs.
JS
$(document).ready(function(){
$('#banana').tab('show');
});
or
$(document).ready(function(){
$('#banana').pill('show');
});
You just need to change your jQuery selector to address the a element instead of the tab-pane div.
$(document).ready(function(){
$('a[href="#banana"]').tab('show');
});
If you need, you can find more detailed description about bootstrap tabs in the official documentation.
#Stu Here you go.
HTML:
Assign an ID myTab to UL element.
<ul class="nav nav-pills pillstyle" id="myTab">
JS:
$(function () {
$('#myTab a[href="#banana"]').tab('show');
});
Also refer to Bootstrap documentation on selecting different elements on load here. It will give you better understanding.
http://getbootstrap.com/2.3.2/javascript.html#tabs
Working demo: https://jsfiddle.net/tf9k9j27/
Note: Just to answer your trial and error.
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling. (From bootstrap docs. read more to get better clarity)