I have svg icons that are conditionally rendered on vue component. The idea is to change the colour of the icon when the mouse hover over the icon, the icons are exactly the same except for colour.
I have built vue3 SPA project with cli, both svg icons are stored in assets folder of the src file.
Here is the code for conditionally rendering icons.
<div
class="icons"
v-on:mouseover="hoverMenu = true"
v-on:mouseout="hoverMenu = false"
>
<img
v-if="!hoverMenu"
title="Menu"
src="../assets/help_outline_24px.svg"
alt="icon"
/>
<img
v-else-if="hoverMenu"
title="Menu"
src="../assets/help_24px.svg"
alt="icon"
/>
</div>
Data binding
export default {
data: function () {
return {
hoverMenu: null,
}
},
}
The code runs and the icons change when hover over icons however the are two issues.
The first time user hover over the icon it takes longer to load the icon, there is a split or few seconds before the icon changes, by that time it is substituted by alt element text.
Sometimes the icons don't change when the mouse hover over icons repeatedly, e.g when mouse hover over icon it changes then it does't change back when mouse is out of icon as if the condition has not changed at all.
Please assist with the issues above, I'm still new to front-end and vue.
Thanks in advance.
Related
I am creating a pop up using official docs per https://docs.mapbox.com/mapbox-gl-js/example/popup/
But inside the html I would like to set custom Quasar Vue components, such as images, buttons, .etc
I am wondering if that is even possible and if so what would be the syntax for it.
Below is an example of what I would like to achieve with popup.setHTML().
The simple p tag will render correctly but the button wont work using q-btn quasar directive.
map.on('click', layerID, (e) => {
const popup = new mapboxgl.Popup({offset: [0, -15]})
.setLngLat(LngLat)
.setHTML(
`<div>
<p>Some Text</p>
<q-btn #click="alert('hello world')" >Button Title</q-btn>
</div>`
);
popup.addTo(map);
});
I have a Vue 3 application with router. (Using Bootstrap)
I have deep component in header, and main container (page in RouterView).
Question: I want to show few icons in header, but use it from page component.
What I must to use to do that?
I try to send template, dynamic import and etc, but as i understand it`s wrong ways.
I have same struct:
App
Header
Title
Icons
LeftMenu
MainContant
PageTitle
PageContant <- RouterView
Footer
So I have special template to Header Icons for each page. And I want to work with icons from page component. For example make submit icon.
I'm not completely sure if I understand the question correctly. But from what I get you want to have a slot in your Header component - docs.
So you can use it in MainContainer as follows:
<div>
<Header>
<Icon />
</Header>
</div>
In this case you'll have access to the Icon components in your MainContainer template.
I'm trying to keep the v-select menu attached to the v-select but in the meantime also have it over the dialog when open, in the bellow codepen you can see that the Age dropdown is hidden inside its container and I can't figure out how to make it visible
I have this hierarchy of v-dialog -> v-stepper -> v-select
<v-select
attach
:items="['0-17', '18-29', '30-54', '54+', '60', '77']"
label="Age*"
required
></v-select>
https://codepen.io/amaieras/pen/VwWRzpL?editors=101
P.S. I don't want to remove the attach, the client wants it to be glued to the v-select :)
Stepper component in vuetify has overflow: hidden style by default. You can change this property to visible in CSS:
.v-stepper,
.v-stepper__wrapper,
.v-stepper__items {
overflow: visible;
}
You can visit this codepen too.
Because Modal has a fixed size.
And your v-select is almost at the bottom of modal.
If you move that field to top or middle, it will work for you.
Or you can make modal height larger than now.
Please add this css.
.v-menu__content .theme--light .menuable__content__active {
position: initial !important;
}
this will work for you.
On ReactJS I can show the icon by using it's name taken from this website: https://fontawesome.com/icons?d=gallery&q=eye&m=free
As you can see, if you search by eye, you'll have a lot of options there, and if you click on the icon it will show you what name you should use to call that icon. For example: fas fa-eye will render a solid eye and far fa-eye will render a regular eye.
The problem is that on react-native I can't call the icon name like this, it won't accept, so I have to just use the word eye, but this limits me by a random eye that's not from my choice. So I wanna know if there's any way that I can pick the icon that I want just like in ReactJS? This is how I'm currently using the fontawesome icons on react-native:
import FontAwesome from 'react-native-vector-icons/FontAwesome5';
...
return <FontAwesome name={'eye} style={props.customStyle} />
The showed icon appears on the website's list, but as I said, there's more than one icon with the same name and I want be able to choose bettween then.
For those that are struggling into this problem, just add the solid or light tag into your component and it will change the icon, example:
return <FontAwesome name={'eye'} style={props.customStyle} solid />
you can try to use IconDefinition and choose icons by their names.
import { FontAwesomeIcon } from "#fortawesome/react-native-fontawesome";
import { faBookOpen } from "#fortawesome/free-solid-svg-icons";
<FontAwesomeIcon
icon={faBookOpen}
size={28}
/>
I'm building a Vue.js web application. I'm using CKEditor in a form that is placed inside a modal window. By design, the user's focus is "trapped" in the modal. In CKEditor, when user clicks the "Link" icon in toolbar, the editor opens a dialog box and attaches the new DOM element to 'document.body'. With respect to the DOM, the "Link" dialog is now outside of trapped focus. The user cannot click or tab his way to the "Link" dialog input.
I dug into the ckeditor5-ui source and found relevant code in balloonpanelview.js. I've unsuccessfully tried to configure CKEditor based on https://ckeditor.com/docs/ckeditor5/latest/api/module_utils_dom_position-Options.html
In my Vue.js component, I have:
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
...
data: () => ({
editor: ClassicEditor,
editorConfig: {
toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'link'],
},
...
})
...
I want the CKEditor "Link" dialog DOM element to be attached to a DOM element id that I specify.
In Vuetify dialog component is required to disable retain-focus
<v-dialog :retain-focus="false" />
There may be much time since you opened the issue. However... This issue was happening to me too. This is happening because Bootstrap modal trap the focus in the active modal. If you're using bootstrap-vue, do this.
In your <b-modal> add the prop no-enforce-focus.
no-enforce-focus is reactive. To properly apply this workaround you can use this prop with a variable, that detects when your CKeditor have focus. If have focus, disable the enforce focus. If doesn't have, restore it. You can apply it by the following way:
<template>
<b-modal
...
:no-enforce-focus="editorFocus">
<ckeditor
...
#focus="toggleEditorFocus(true)"
#blur="toggleEditorFocus(false)"
/>
</b-modal>
</template>
<script>
export default {
...
data () {
return {
editorFocus: false
}
},
methods: {
toggleEditorFocus (val = !this.editorFocus) {
setTimeout(() => {
this.editorFocus = val
}, 10)
}
}
}
</script>
I know the setTimeout is a tricky method, but at least is working now for me.