I tried using the span pointing property <span class="label pointing-up bg-primary text-white">up</span> and QChip's pointing property as explained in the docs, but the pointing part doesn't work. I tried it in different projects, but the property doesn't work. Is there any other alternative?
You can use the quasar tooltip component I think.
Check out this codepen and see if it is any helpful to you.
const { ref } = Vue
const app = Vue.createApp({
setup () {
return {
showing: true
}
}
})
app.use(Quasar, { config: {} })
app.mount('#q-app')
<script src="https://cdn.jsdelivr.net/npm/quasar#2.7.7/dist/quasar.umd.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#3/dist/vue.global.prod.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quasar#2.7.7/dist/quasar.min.css" rel="stylesheet"/>
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md">
<div
style="width: 200px; height: 70px;"
class="bg-purple text-white rounded-borders row flex-center q-mt-md"
>
Hover here or click buttons
<q-tooltip v-model="showing">Tooltip text</q-tooltip>
</div>
</div>
</div>
Related
I am trying to display FontAwesomeicon
<font-awesome-icon icon="fa-solid fa-shop" />
with JavaScript array to be dynamic but it's not working it displays as text
<div class="aboutme-card" v-for="(item,index) in servicesArr" :key="index">
<div class="service-card-icon">{{item.icon}}</div> <!--but its display as text not as icon svg-->
<div class="service-card-title">{{item.title}}</div>
<p class="service-card-desc">{{item.description}}</p>
</div>
<script>
export default {
data() {
return {
servicesArr: [
{
icon: `<font-awesome-icon icon="fa-solid fa-shop" />`,
title: "E-commerce",
}
]
}
}
}
</script>
Isn't something like this conceivable in your case?
<template>
<div class="aboutme-card" v-for="item in servicesArr" :key="item.icon">
<div class="service-card-icon">
<font-awesome-icon :icon="item.icon" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
servicesArr: [
{
icon: "fa-solid fa-shop",
title: "E-commerce",
}
]
}
}
}
</script>
Even if v-html exists, it's usually not the way to go.
Especially in such a simple use-case where dynamic props are totally fine.
Overall, I still recommend that solution for overall ease of use + flexibility.
I would show and hide a button on edit when hovering a div. Like WordPress.
How to display a div inside a div if hovered? I'm trying to do this but there's something wrong, nothing appears.
<div class="row d-flex align-items-center" id="company">
<div class="col-lg-6 mb-4">
<div class="p-5">
<h1>Company</h1>
<p class="text-justify">Description</p>
Start
</div>
</div>
<div class="col-lg-6 mb-4">
<img src="/images/layer.png" alt="Company" class="img-fluid lazy">
</div>
<div class="p-5">
<div id="menu">
<div class="btn-group">
<button type="button" class="btn btn-warning">وEdit</button>
</div>
</div>
</div>
</div
<script>
$("#company").hover(function(){
$("#menu").css("d-none", "d-block");
});
</script>
wordpress
You don't need Javascript for this. You can do it all in CSS. The first rule below defaults to hiding the menu. The second rule overrides the first rule to show the menu when you hover over the #company div.
#menu {
display: none; /* Default */
}
#company:hover #menu {
display: block;
}
If you want to do it with Javascript/jQuery, you must specify separate actions for the mouseenter and mouseleave events, to ensure the menu shows/hides accordingly:
$("#company").hover(
function() {
$("#menu").css("display", "block");
},
function() {
$("#menu").css("display", "none");
},
);
If you want to use purely Bootstrap classes rather than manipulating the CSS style rules directly:
$("#company").hover(
function() {
$("#menu").addClass('d-block').removeClass('d-none');
},
function() {
$("#menu").addClass('d-none').removeClass('d-block');
},
);
Hi your code is almost correct.In your Jquery part you have to use addClass() instead of css() because you are trying to change the class name of the element.Just try this one.Hope this works
<script>
$("#company").hover(function () {
$("#menu").addClass("d-none");
});
</script>
By default the css can be added to the "menu" id
#menu {
display: none;
}
using js:
$("#company").hover(function () {
$("#menu").css("display", "block");
});
to clarify I'm using react-bootstrap and trying to use bootstrap. I have the following:
import React from 'react'
// bootstrap
import { Button } from 'react-bootstrap';
const MainDisplay = () => {
return (
<div className='MainDisplayContainer'>
<div className='Header'>
<button>Header</button>
</div>
<div className='Body'>
body
</div>
<div className='Footer'>
footer
</div>
</div>
)
}
export default MainDisplay
and this is the sass:
#import "~bootstrap/scss/bootstrap";
.Header{
button{
#extend .btn;
}
}
.Body{
}
.Footer{
}
Essentially if I were to do this inline it would simply be:
<button className='btn btn-info'>Header</button>
but how would I do this in the sass file?
Not really understanding what you're needing to change in the SASS file but per your button example in React Bootstrap per the docs if you want:
<button className='btn btn-info'>Header</button>
you would use the variant info:
<Button variant="info">Header</Button>
I'm building a Nuxt app and am having trouble with conditional styling. What I'm trying to do is apply a different background color to the active link depending on what page it is. I know I can use .nuxt-link-exact-active to style the active link, but I'm stuck on how to make that different on each page.
I have the links in a component that gets rendered on each page. I've tried using .nuxt-link-exact-active at the page level, but it doesn't get picked up.
Here's what I've got so far, which does change the styling depending on the page, but it does it for all the links, and I only want it on the active link. Please let me know if I can clarify anything. Thanks!
<template>
<nav class="flex-container flex-column mt-1">
<NuxtLink to="/about" class="link" :class="classObject">about</NuxtLink>
<div class="mt-1 flex-container">
<NuxtLink to="/projects" class="link" :class="classObject"
>projects</NuxtLink
>
</div>
<div class="mt-1 flex-container">
<NuxtLink to="/contact" class="link" :class="classObject"
>contact</NuxtLink
>
</div>
</nav>
</template>
<script>
export default {
// apply current route name as a class to the matching div
computed: {
classObject() {
return {
about: this.$route.name === 'about',
projects: this.$route.name === 'projects',
contact: this.$route.name === 'contact',
}
},
},
}
</script>
<style lang="scss" scoped>
.about {
background-color: $near-white;
}
.projects {
background-color: $blue;
}
.contact {
background-color: $yellow;
}
</style>
illustration of what I'm trying to do
Instead of changing .nuxt-link-exact-active at the page level, change it in the layout.
So for example, in layouts/default.vue:
<style>
.nuxt-link-exact-active {
background: red;
}
</style>
I came up with a solution— not sure if it's the best way, but it works. Each link is now preceded by a div that only gets rendered on the corresponding page, otherwise a link is rendered.
<template>
<nav class="flex-container flex-column mt-1">
<div v-if="currentPageName === 'about'" class="box about">
<h2>about</h2>
</div>
<div v-else>
<NuxtLink to="/about" class="link">about</NuxtLink>
</div>
<div v-if="currentPageName === 'projects'" class="box projects">
<h2>projects</h2>
</div>
<div v-else>
<NuxtLink to="/projects" class="link">projects</NuxtLink>
</div>
<div v-if="currentPageName === 'contact'" class="box contact">
<h2>contact</h2>
</div>
<div v-else>
<NuxtLink to="/contact" class="link">contact</NuxtLink>
</div>
</nav>
</template>
<script>
export default {
computed: {
currentPageName() {
return this.$route.name
},
},
}
</script>
<style lang="scss" scoped>
.box {
width: 150px;
height: 150px;
}
.about {
background-color: $near-white;
}
.projects {
background-color: $blue;
}
.contact {
background-color: $yellow;
}
</style>
I think the easiest way to check if the path is active or not is $nuxt.$route.path.
<template>
<ul>
<li>
<nuxt-link :to="links[0].path" :class="{'bg-black text-white': links[0].path == path }">{{ links[0].name }}</nuxt-link>
<nuxt-link :to="links[1].path" :class="{secondStyle: links[1].path == path }">{{ links[1].name }}</nuxt-link>
</li>
</ul>
</template>
<script>
export default {
name: "Header",
data() {
return {
path: null,
links: [
{path: "/link1", name: "Link 1"},
{path: "/link2", name: "Link 2"}
],
};
},
mounted() {
this.path = $nuxt.$route.path;
},
};
</script>
I have been racking my brain how I could include a toggle menu on my website, after some searching I found the below and have implemented it, which is great!
http://jsfiddle.net/hhcsz5cr/
<div>
<h1><button class="button" data-circle="travel">
<i class="fa fa-plus-square"></i>
</button> Travel</h1>
</div>
<div class="travel options">
<ul>
<li>Travel</li>
<li>Vehicles</li>
</ul>
</div>
var localStorageKey = "app_state";
// to preserve state, you first need to keep track of it
var default_state = {
biographies: false,
pictures: false,
poetry: false
}
var saved_state = localStorage.getItem(localStorageKey);
// ternary operator which means if `saved_state` is true we parse it and use that value for `state`; otherwise use `default_state`
var state = saved_state ? JSON.parse(saved_state) : default_state;
$(function() {
init();
$('.button').on('click', function() {
var circle = $(this).attr('data-circle');
toggleCircle(circle, !state[circle]);
$(this).find('i').toggleClass('fa-minus fa-plus');
});
});
function init() {
for(var key in state) {
var is_displayed = state[key];
if ( is_displayed ) {
$(this).find('i').toggleClass('fa-minus fa-plus');
} else {
$(this).find('i').toggleClass('fa-plus fa-plus');
}
console.log(is_displayed);
toggleCircle(key, is_displayed);
}
}
function toggleCircle(circle, is_displayed) {
if (is_displayed) {
$('.'+circle).show()
state[circle] = true;
} else {
$('.'+circle).hide()
state[circle] = false;
}
localStorage.setItem(localStorageKey, JSON.stringify(state));
}
But.. if you minimize a menu then refresh the icon shows a - even though its already minimize.
Is there any way I can change this?
I realise the code above is not my own and I can't find the person to credit! My jquery is terrible.
Any help would be appreicated.
Thanks
jsFiddle DEMO (since SO snippets do not allow localStorage from Iframe)
Use IDs, not classes. IDs are unique, not classes.
Store the entire ID as the object property i.e: "#pictures": false,
Store the entire selector inside data-* i.e: data-toggle="#biographies"
Use "is-*" classes as state CSS helpers: "is-hidden", "is-expanded"
You don't have to use .fa classes, just use CSS and font-family
Make use of Object.assign() to override your default values with the ones in Local Storage (if any).
Loop your object key value pairs using Object.entries() when initing your menu states.
// Override defaults with localStorage
const state = Object.assign({
"#biographies": false, // Feel free to change this default boolean
"#pictures": false,
"#poetry": false
}, JSON.parse(localStorage.state || "{}"));
const toggle = (k, v) => {
$(k).toggleClass('is-hidden', !v);
$(`[data-toggle="${k}"]`).toggleClass('is-expanded', v);
};
// On init
Object.entries(state).forEach(([k, v]) => toggle(k, v));
// On click
$("[data-toggle]").on("click", function() {
const id = this.dataset.toggle; // Get ID i.e: "#pictures"
state[id] = !state[id]; // Flip boolean
toggle(id, state[id]); // Trigger UI changes
localStorage.state = JSON.stringify(state); // Store into LS
});
.is-hidden {
display: none;
}
[data-toggle] i:before{
font-family: "FontAwesome";
font-style: normal;
content: "\f067"; /* Plus */
}
[data-toggle].is-expanded i:before{
content: "\f068"; /* Minus */
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="biographies" class="is-hidden">Biography</div>
<div id="pictures" class="is-hidden">Pictures</div>
<div id="poetry" class="is-hidden">Poetry</div>
<button type="button" class="button" data-toggle="#biographies">
<i></i> biographies
</button>
<button type="button" class="button" data-toggle="#pictures">
<i></i> pictures
</button>
<button type="button" class="button" data-toggle="#poetry">
<i></i> poetry
</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Please try this..
$('.button').click(function(){
var whichbtn = $(this).attr('data-circle');
if($("."+whichbtn).hasClass("hidden")){
$(this).children("i").removeClass("fa-plus").addClass("fa-minus");
}else{
$(this).children("i").addClass("fa-plus").removeClass("fa-minus");
}
$("."+whichbtn).toggleClass("hidden");
});
.hidden{display:none;}
.button{
background:#00cc00;
padding:10px 20px;
margin-right:10px;
border:none;
color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="m-3">
<div class="biographies hidden mb-2 font-weight-bold">Biography</div>
<div class="pictures hidden mb-2 font-weight-bold">Pictures</div>
<div class="poetry hidden mb-2 font-weight-bold">Poetry</div>
<button class="button" data-circle="biographies">
<i class="fa fa-plus"></i> biographies
</button>
<button class="button" data-circle="pictures">
<i class="fa fa-plus"></i> pictures
</button>
<button class="button" data-circle="poetry">
<i class="fa fa-plus"></i> poetry
</button>
</div>
I add js for click event of button and get the attribute of data-circle of it's own for find which button clicked. And fa fa-plus icon changed to fa fa-minus also. Thats only.
toggleClass is used for toggle class when user click the button. First click add class hidden then second click remove class hidden.For more clarifications comment me.