I'm using Element Plus 2.2.28 and Vue.js 3.2.45.
I want to have a button like this:
<el-button>Contact</el-button>
When I click the button, I want it to behave like a link tag using mailto:someone#example.com.
I tried this:
<el-button href="mailto:someone#example.com">Contact</el-button>
However, this doesn't work.
I could use pure JS in the #click event of the button, but I understand this is not recommended.
Since you want to click on the button to redirect you, then you do not need any other functionality that the el-button offers. As such, you only want the appearance of an el-button. Therefore, you can use the el-button class instead on an anchor tag as follows;
<a class="el-button" href="mailto:someone#example.com">Contact</a>
Related
I’m stuck with putting one button inside of another one: it’s prohibited, but I use bootstrap, that’s why I appoint class “btn …” to span and it looks like the button.
My button should look like this:
Filename.jpg <small delete button<
When you press on filename, file opens, when on small delete button - it sends request to API and deletes file
But now link is not working, but delete button does work. Putting and so one did not solve my problem
Code:
<span v-for=“link in links”
class= “btn btn-success”
v-bind:href=“<domain> + link.file”>
<button type=“button” class=“btn btn-danger” #click=“deleteFile(`$(link.file_id) `)”>-</button>
</span>
href only works on certain elements. Use <a> anchor instead of <span>.
Generally speaking it is not a good idea to wrap clickable elements inside other clickable elements. It's bad for accessibility and tab navigation and it can lead to easy missclicks from your users.
The right thing to do would be to put your two buttons next to each others to indicate that there is in fact two separate actions your users can take related to the file.
I am using bootstrap-vue library, and I am using component to generate dropdown. However i need to add additional button. This button need to be located right after in DOM, but i have not found a way how to make it possible. If i write this button just inside component, it is not generated at all, and if i write button outside of , it is not generated after . Is there any way to generate my button right after by using v-slot or something else?
I am trying to create component which would extend v-btn in such a way that every time I click a button, it should emit short beep, and disable the button for 5 seconds.
It would be ideal for the button to change color while disabled.
This is a problem, since color is a property, and I can't overwrite it's value...
Also, when I try to invoke super.click(e), I get an error.
You can check example here: https://codesandbox.io/s/elegant-glade-pnhqx
Your Btn component should just "use" v-btn rather than extending it.
v-bind="$attrs" is to copy any <btn>'s attribute onto <v-btn>.
#click event is captured and reemited as-is after doing what needs to be done
See https://codesandbox.io/s/immutable-paper-w1wck?file=/src/components/Btn.vue:41-56
I'm trying to style a Buefy button to look like a simple text-link.
For example, it is possible to use:
<b-button
tag="a"
type="is-text"
href="https://www.example.com"
>
Click here
</b-button>
This produces near the result I'm looking for, except I want to achieve a type such as is-text-red and is-text-blue to make the button appear as text of particular colours.
I could solve this by simply using:
Click here
Click here
But I want to use <b-button type="is-text-red"> to make an inline link.
Can anyone point me in a direction that involves Bulma CSS and/or Buefy CSS modifications that would achieve this?
I'm looking at the node_modules BButton component, and it looks like the type prop is passed through, so it looks possible to create a custom type somewhere that would be analogous to is-info and is-warning.
I would like to have text-only versions such as is-text-info and is-text-warning so I can use the button component to place inline anchor tags.
Stated concisely, how does a person add another type to <b-button> that provides arbitrary styling?
Check this link(https://buefy.org/documentation/customization/). You might need to define your own css overrides.
I'm writing a CRUD app using Vue with Vuetify. I have some links defined as v-btns using the "to" attribute. I've noticed that when clicking on buttons, the active button usually changes so that the button corresponding to the user's current location is highlighted. However, I have two routes that look like this:
"/songs/new"
"/songs"
The v-btn's have the following "to" attributes:
to:"/songs/new"
to:"/songs"
However, when clicking on the button that directs to "/songs/new", vuetify sets both buttons to be active. Any idea why it does this?
You need to make use of exact attribute.
<v-btn to="/songs/new" exact>Songs</v-btn>
<v-btn to="/songs" exact>New Song</v-btn>
Now the button will get active class only if you were in exactly route.
Also you can make use of exact-active-class to use custom active classes.