Im looking to run a function that corresponds with each router link with that has the default class 'router-link-active'.
For simplicity I would like to replicate basic CSS class/style change for each active link using Javascript or Vue.js Directives.
CODEPEN
<router-link to="/1" class="link ROUTER-LINK-ACTIVE">one
<span style="change this within function when active"></span>
</router-link>
thank you for any insight )
Related
Not sure why, I need to close offcanvas after the user click on a <router-link> in my vue app.
I've imported the related component in this way
import { Offcanvas } from 'bootstrap/dist/js/bootstrap.esm'
And inside my methods I've created a method that will be called from the router link
closeOffcanvas() {
const offcanvasMenu = new Offcanvas(this.$refs.offcanvasNavbar)
console.log(offcanvasMenu)
offcanvasMenu.hide()
},
<li class="nav-item">
<router-link class="nav-link" :to="userProfileURL" #click="closeOffcanvas">Profilo</router-link>
</li>
I've tested the data-bs-dismiss="offcanvas" but this will prevent the navigation to the requested route.
Any suggestion or tip to fix this?
Basically I'm trying to remake some simple web page that I have initially created with HTML and CSS to be working rather on React. I managed to redo the page to correctly display when it was moved into React, however I don't really understand why the navigation links that I have on top do not take me to the corresponding section on the same page anymore as well as why the external links to the project sites also stopped working.
Here is the project link code:
import React from "react";
export default function ProjectTile(props) {
return (
<div className="project-tile" id={props.id}>
<a href={props.href} target="_blank" id={props.link_id}>
<img
className="project_screenshot"
src={props.img_src}
alt={props.img_alt}
/>
<p className="project_name">
<span className="brackets"><</span> {props.title}{" "}
<span className="brackets">/></span>
</p>
</a>
</div>
);
}
All props are getting mapped and loaded from the array with corresponding data where each object looks like this:
{
id: "tribute_page",
link_id: "https://codepen.io/konstantinkrumin/full/PooYQbG",
img_src: "https://i.imgur.com/ynRuzOQ.png",
img_alt: "tribute_page_screenshot",
title: "Tribute Page"
}
The navigation links used are the following:
import React from "react";
export default function Navbar() {
return (
<nav id="navbar">
<a className="nav-link" href="#welcome-section">
About
</a>
<a className="nav-link" href="#projects">
Projects
</a>
<a className="nav-link" href="#contact">
Contact
</a>
</nav>
);
}
And each section they refer to have an id corresponding to the href indicated above.
Here if the link to this project on codesandbox
P.S. Everything used to work correctly when it was on HTML.
Also the contact links that seem to be set in similar way as project links are working.
Here are two things I think I found out:
In the ProjectTile.js file, replace href = {props.href} by href={props.link_id and now project opens in codepen.
About the jump link you have made in nav-bar, I think it's because of problem of codesandbox.
If you manage to make your url to https://op6gq.csb.app#projects instead of https://op6gq.csb.app/#projects. That's gonna work.
Or directly visiting https://op6gq.csb.app/#welcome-section jump link too works well.
It looks like there's no href prop. Sounds like what you want is something like
href={`#${props.id}`}
which would evaluate to href="#tribute_page" in this example.
You Have to try that your page url become:
https://op6gq.csb.app#welcome-section
Not:
https://op6gq.csb.app/#welcome-section
please attend to that / in address bar!
<div class="flex">
<div class="layout-row layout-align-end-center">
{{#paper-button href="overview" raised=true primary=true}}Overview{{/paper-button}}
{{#paper-button href="incomes"}}Incomes{{/paper-button}}
{{#paper-button href="expenses"}}Expenses{{/paper-button}}
{{#paper-button href="settings"}}Settings{{/paper-button}}
</div>
</div>
So I am trying to set the raised=true whenever I am on certain page/template. The above code is from my application template. Is there any way of doing this using JS/Ember or should I just do it manually in each of my templates?
I think the best way to go is to write a custom component wrapping paper-button. ember-route-helpers gives you nice helpers to do that:
{{#paper-button
onclick={{transition-to #route)
href=(url-for #route)
raised=(is-active #route)
primary=(is-active #route)
}}
{{yield}}
{{/paper-button}}
Then you can use that component with {{#your-component route="settings"}}Settings{{/your-component}}.
It's important to understand that you should pass both the action and the href. Because then when people click on the button it will make a transition and dont reload the entire page, but rightlick->open and screenreaders are are not broken.
I'm trying to make a login button as a single-file-component in Vue.js (it's a Rails app with a Vue.js front-end). If you click this button, it's supposed to take you to the an external provider's login page.
How can I use an image as a button? I'm guessing you use v-on:click for the actual redirect, but I'm stuck there.
Right now, this code below shows a hardcoded button that looks like img(src="../assets/img/login_button.png"). You can click on it, but that's obviously not what I want. I want to show the actual png image, not the path.
// LoginButton.vue
<template lang="pug">
#login-button
<button v-on:click="redirect_to_login">img(src="../assets/img/login_button.png")</button>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
#Component
export default class LoginButton extends Vue{
redirect_to_login():void{ // I haven't written this method yet
}
}
</script>
Is there any reason you can't just use normal HTML image inside your button? I haven't used pug before.
<button v-on:click="redirect_to_login"><img src="../assets/img/login_button.png" /></button
Though since you're using Vue and not an actual HTML form you might not even need a button you could just add the click binding to the image instead
<img src="../assets/img/login_button.png" v-on:click="redirect_to_login" />
I am not familiar with pug, so I don't know what the correct syntax you'll need is. But you can use the <router-link> tag to set the route. For example (using Vuetify)
<router-link to="/">
<v-img src="/path/to/img.gif"/>
</router-link>
Either you can use:
<a #click="Redirect">
<img src='IMAGE_SRC' />
</a>
or
<img #click="Redirect" src='IMAGE_SRC'/>
new Vue({
el: '#app',
methods:
{
Redirect()
{
window.location.href = "https://jsfiddle.net/";
//or
//this.$router.push('LINK_HERE'); // if ur using router
}
}
})
Demo LINK:
https://jsfiddle.net/snxohqa3/5/
I can link like this in vue.js 2.0:
<router-link to="home">Home</router-link>
This compiles to an a tag. But how do I do this with a div?
With vue.js 1.0 I did it like this:
<div v-link="{ name: 'Messages', params: { topic: topic.slug }}">test</div>
That's obviously not working anymore.
Well, router-link has a tag prop. You're looking for this:
<router-link to="home" tag="div">Home</router-link>
The Vue Way
If you want <router-link> to render as another tag, in your case div, you can use tag prop to specify which tag to render to, and it will still listen to click events for navigation.
<router-link to="home" tag="div">Home</router-link>
You can also do this via one of pure HTML ways:
Way 1
<a href="/home">
<div>
Home
</div>
</a>
Way 2
<div style="cursor: pointer;" onclick="window.location='/home';">
Home
</div>
You can also modify second way in vue way as following:
<div style="cursor: pointer;" #click="redirectToHome">
Home
</div>
where you can define redirectToHome method as following:
methods: {
redirectToHome () {
this.$router.push(
{
path: '/home',
}
)
},
Vue.js 3
Disclaimer: the question is about Vue.js 2. I saw that.
tag attribute is no more
Instead, do a v-slot such as:
<router-link to="/about" custom v-slot="{ navigate }">
<div role="link" #click="navigate">test</div>
</router-link>
custom prevents the creation of an a element
navigate is the function provided for the div, to activate navigation
role="link" is accessibility stuff (you could omit it), but can also be used for CSS'ing the hand mouse cursor
CSS:
[role="link"]:hover {
cursor: pointer;
}
One could also just let the a remain, since browsers are now better at dealing with a display:block a, but that's another story.