I am trying to use https://vuetifyjs.com/en/components/tooltips in my rails app. I am not sure where I am going wrong but this is not working. Help me figure out the problem.
When I try to inspect the element this is how it shows
<div class="flex add-col-padding-left xs1 md6">
<span class="tooltip tooltip--bottom">
<div class="tooltip__content" style="left: 0px; opacity: 0; top: 12px; z-index: 0; display: none;">
<i dark="" class="material-icons icon-black">
question_answer
</i>
<span>Tooltip</span>
</div>
<span></span>
</span>
</div>
index.js
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify, {
theme: colors
});
index.vue
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<i dark v-on="on" class="material-icons icon-black">
question_answer
</i>
</template>
<span>Tooltip</span>
</v-tooltip>
Related
I have a sidebar menu where I am trying to put my social media section at the bottom of the sidebar but I am struggling to get flex to work and do so. I tried item-stretch on the second row but the issue is the row does not expand the entire scroll area. The closest example which is not quasar per say can be found here https://preview.colorlib.com/#elen
Sidebar Component:
<template>
<div class="navigation-links q-pa-lg">
<q-list padding>
<q-item clickable v-ripple class="q-pa-md q-ma-md menu-item">
<q-item-section avatar>
<q-icon name="fa-solid fa-house" style="font-size:1.25rem"/>
</q-item-section>
<q-item-section>
HOME
</q-item-section>
</q-item>
<q-item active clickable v-ripple class="q-pa-md q-ma-md menu-item active-menu-item">
<q-item-section avatar>
<q-icon name="fa-solid fa-shirt" style="font-size:1.25rem"/>
</q-item-section>
<q-item-section>
SERVICES
</q-item-section>
</q-item>
<q-item clickable v-ripple class="q-pa-md q-ma-md menu-item">
<q-item-section avatar>
<q-icon name="fa-solid fa-envelope" style="font-size:1.25rem"/>
</q-item-section>
<q-item-section>
CONTACT US
</q-item-section>
</q-item>
</q-list>
</div>
<div class="socialmedia-links q-pa-lg text-center column no-wrap flex-center self" style="">
<div class="row">
<q-btn flat size="sm" color="primary" round icon="fa-brands fa-google" aria-label="google" class="float-right q-ma-sm no-shadow"/>
<q-btn flat size="sm" color="primary" round icon="fa-brands fa-facebook-f" aria-label="facebook" class="float-right q-ma-sm no-shadow"/>
<q-btn flat size="sm" color="primary" round icon="fa-brands fa-instagram" aria-label="instagram" class="float-right q-ma-sm no-shadow"/>
</div>
<h2 class="text-h5 text-weight-bolder q-mb-xs">CONNECT WITH US</h2>
<h6 class="text-subtitle1 text-accent text-weight-normal q-my-none">If you like what you have seen so far we can guarentee you will appreciate our print quality.</h6>
</div>
<script setup>
import { ref } from 'vue'
const searchText = ref('')
</script>
<style lang="scss" scoped>
.block-wrapper{
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
.active-menu-item{
background-color: $background-accent;
}
.menu-item{
letter-spacing: .15rem;
font-weight:500;
border-radius: 7px;
}
</style>
Layout Component
<q-drawer
v-model="navigationDrawer"
bordered
side="left"
behavior="mobile"
:width="$q.screen.width >= 400 ? 400 : $q.screen.width"
>
<q-scroll-area class="fit q-pa-lg">
<div class="row justify-end">
<q-btn flat round icon="fa-solid fa-xmark" aria-label="Menu" #click="toggleNavigationDrawer"/>
</div>
<div class="row" style="min-height: 100%;">
<div class="col-12">
<HomeSidebar/>
</div>
</div>
</q-scroll-area>
</q-drawer>
Turn q-scroll-area's content container into a flex column. You can apply CSS classes directly to the container with :content-style prop
<q-scroll-area
class="fit q-pa-lg"
:content-style="{ display: 'flex', 'flex-direction': 'column' }"
>
Also make the div surrounding the sidebar a flex column with justify-content: space-between. The row surrounding it should also have flex-grow: 1
<div class="row" style="min-height: 100%; flex-grow: 1">
<div class="col-12 flex column justify-between">
<HomeSidebar/>
</div>
Here's a sandbox that shows the result
I can't figure out why my v-list won't update the color whatever i do.
here is my code
<template>
<v-app>
<v-navigation-drawer app>
<div style="background-color: grey;" class="d-flex justify-center pa-4 ">
Fichiers chargés
</div>
<div class="d-flex flex-column ">
<v-btn prepend-icon="mdi-folder" class="mt-4 mb-2 mx-auto text-black bg-green hidden-sm-and-down"
plain>Parcourir
..</v-btn>
<v-checkbox class="mx-auto" label="Ajout auto. en base"></v-checkbox>
</div>
<v-divider></v-divider>
<v-list class="my-list" color="primary" >
<v-list-tile v-for=" f in fichiers">
<v-card-text class=" mx-5 px-5 bg-red">
{{ f.nom }}
</v-card-text>
</v-list-tile>
<v-divider></v-divider>
<v-list-item style="width: 0100%;">
<div style="text-align: center;">
{{ fichiers.length }} Fichiers Chargés
</div>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
<style>
.my-list {
background-color: red;
}
</style>
<script setup>
let fichiers = [
{
nom: "Fichier1",
taille: "2ko",
contenu: "jhbjm",
etat: [],
}
]
</script>
in my devtools i can see that the v-list took the bg-transparent. I tried everything to force it but nothing happened
sorry for my bad english XD
The Solution :
Don't forget to give a feedback.
Use "!important" in your "background-color" value
.my-list {
background-color: red !important;
}
Use the "id" selector if you don't want to use "!important"
#the-list {
background-color: red;
}
<v-list id="the-list" color="primary" >
<v-list-tile v-for=" f in fichiers">
...
</v-list-item>
</v-list>
The reason of your problem :
If you look at the browser developer tool, you'll find that the class "v-list" is written before your custom class "my-list". That means, the priority is not for your custom class.
I was trying to add transition to a slot like this
<template>
<transition name="committee">
<div class="card">
<slot></slot>
</div>
</transition>
</template>
Added CSS classes like this
.committee-enter-from{
opacity: 0;
transform: translateX(-3rem);
}
.committee-enter-active{
transition: all 1s ease-in;
}
.committee-enter-to{
opacity: 1;
transform: translateX(0) ;
}
The parent template looks like this
<section class="section">
<app-committee>
<div class="content">
<div class="imgText">
<div class="imgBx">
<img src="#">
</div>
<h3>Samanta Doe<br><span>Manager</span></h3>
</div>
<ul class="sci">
<li><a href="#">
</a></li>
<li><a href="#">
</a></li>
</ul>
</div>
</app-committee>
</section>
The transition is not working.
What may be the mistake i am making.
The transition should work with conditional rendering v-if="someCondition" and if you want the transition to run at the first rendering you've to add appear prop, in the case you could use the availability of $slots.default as condition :
<transition name="committee" appear>
<div class="card" v-if="$slots.default">
<slot></slot>
</div>
</transition>
I am trying to add a bootstrap navbar to my Vue js app but am running into some problems. I would really appreciate any help you may offer. Thanks!
I copied the navbar code from bootstrap into my App.vue file but for some reason it doesn't appear on the whole screen.
The navbar appears like this:
enter image description here
And when I inspect it it shows like this:
enter image description here
This is my main.js code:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// import $ from "jquery";
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
import "popper.js";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
This is my App.vue code:
<template>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<router-view />
</div>
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
OK, I figured out the problem.
Once I pasted the css Bootstrap link in the head of the index.html, the layout appeared properly:
I also had to paste the jquery and popper cdn links into the head to make the dropdown menu in the navbar work.
Hi i am a newbie in vuejs, Buefy. I wanted to add navigation bar. Navigation Bar works in the desktop however when view it in mobile responsive when the burger click doesn't show anything. the navbar item not collapsible. can anyone help me? Thank you.
Here is my code.
<template>
<div id="app">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a
role="button"
class="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">Home</a>
<a class="navbar-item">Documentation</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">More</a>
<div class="navbar-dropdown">
<a class="navbar-item">About</a>
<a class="navbar-item">Jobs</a>
<a class="navbar-item">Contact</a>
<hr class="navbar-divider">
<a class="navbar-item">Report an issue</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">Log in</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</template>
<script>
import $ from "jquery";
export default {
name: "App",
mounted() {
$(document).ready(function() {
document.addEventListener("DOMContentLoaded", () => {
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach(el => {
el.addEventListener("click", () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
});
});
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Can access here:
https://codesandbox.io/s/stupefied-khayyam-mnb7x
Well, the way you trying to do it is a bit different from the official documentation. In order to create a navbar you should wrap your whole navbar within a <b-navbar> like this:
<b-navbar>
<template slot="brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
</template>
<template slot="start">
<div class="navbar-start">
<a class="navbar-item">Home</a>
<a class="navbar-item">Documentation</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">More</a>
<div class="navbar-dropdown">
<a class="navbar-item">About</a>
<a class="navbar-item">Jobs</a>
<a class="navbar-item">Contact</a>
<hr class="navbar-divider">
<a class="navbar-item">Report an issue</a>
</div>
</div>
</div>
</template>
<template slot="end">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">Log in</a>
</div>
</div>
</div>
</template>
</b-navbar>
Then fill each slot with appropriate content of yours.
Working DEMO: