I want to put an image in v-app-bar-title in Vuetify3, like Stack overflow app bar
I tried this way
<v-app-bar elevate-on-scroll app flat priority="0" >
<v-app-bar-nav-icon> </v-app-bar-nav-icon>
<v-app-bar-title>
<!-- Logo -->
<v-btn x-large :to="Home">
<v-img :src="logoUrl" height="100px" alt="logo"/>
</v-btn>
</v-app-bar-title>
...
But image is very small, height has no effect on size
I also tried
<v-app-bar elevate-on-scroll app flat priority="0" >
<v-app-bar-nav-icon> </v-app-bar-nav-icon>
<v-app-bar-title>
<!-- Logo -->
<v-img :src="logoUrl" height="100px" alt="logo"/>
</v-app-bar-title>
...
but image is offset on the right from the nav icon
Image comes from
<script lang="ts" setup>
const logoUrl = new URL('./assets/logo.png', import.meta.url).href
...
How can we add properly an image in the app bar ?
Thanks
Related
I am trying to setup a carousel for my home page with a carousel with some full screen images and parallax effect on them. I am new to quasar but have used vuetify quite often but recently switched to Vue3 so figured I would try out quasar. However, I am struggling to do this. I see there is a slot for QCarouselSlide but I am not sure how to tie into that for this parallax.
My code so far is as follows:
<template>
<q-page padding="false">
<q-carousel
v-model="slide"
swipeable
animated
navigation-position="left"
navigation
padding
style="height:100vh"
class="bg-purple text-white rounded-borders"
>
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg"></q-parallax>
</q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg"></q-parallax>
</q-carousel-slide>
</q-carousel>
</q-page>
</template>
<script setup>
import { ref } from 'vue'
const slide = ref('style')
</script>
Please refer following codepen.
https://codepen.io/Pratik__007/pen/rNrrRxj
<q-carousel-slide :name="1" class="column no-wrap">
<div class="row fit">
<q-parallax
src="https://cdn.quasar.dev/img/parallax2.jpg"
>
<h1 class="text-white">Basic</h1>
</q-parallax>
</div>
</q-carousel-slide>
I'm learning Tailwind CSS and Svelte, and to practice my skills I decided to make a widget layout with different components. I'm trying to make the grid's item's height flexible - like on the DaisyUI homepage under the components preview - so that other components can fit immediately beneath it. I've tried using flexbox but that lead to the same outcome. My code so far:
App.svelte:
<script>
import './app.css'
import Temp from './components/Temp.svelte'
import Login from './components/Login.svelte'
import Quiz from './components/Quiz.svelte'
import ShoppingList from './components/ShoppingList.svelte'
import Quote from './components/Quote.svelte'
import Date from './components/Date.svelte'
</script>
<main class="w-[calc(100vw - 120px)] max-w-[calc(100vw - 120px)] h-screen grid grid-flow-row grid-cols-5 gap-5 m-5">
<Temp />
<Login />
<Quiz />
<ShoppingList />
<Quote />
<Date />
</main>
All of the other components follow the same simple layout:
<script>
import '../app.css'
</script>
<section class="max-w-xs min-w-xs bg-slate-50 rounded-xl p-5 h-fit">
<!-- other HTML here -->
</section>
Any help or tips would be appreciated!
I have the following simple component:
<template>
<div class='d-flex justify-content-center'>
<g-image src='~/assets/bitcoin.svg' width='36' height='36' />
<h2 class='mx-2'>{{ block_count }}</h2>
<g-image src='~/assets/bitcoin.svg' width='36' height='36' />
</div>
</template>
(the .svg is around 64 in width and height)
Which in small widths gives nice square images:
but as soon as I start increasing the window size in width it streches out the .svg
I've tried to use a couple of g-image's fit parameters but with no luck.
What am I not getting here?
EDIT Live URL to showcase bitcoin-blocks-info-site.s3-website-eu-west-1.amazonaws.com
EDIT
It seems that when I apply b-container scaffolding then the problem goes away:
<template>
<b-container>
<b-row>
<b-col class='d-flex justify-content-center align-items-center'>
<g-image src='~/assets/bitcoin.svg' width='36' />
<h2 class='mx-3 d-inline'>{{ block_count }}</h2>
<g-image src='~/assets/bitcoin.svg' width='36' />
</b-col>
</b-row>
</b-container>
</template>
I have a Vue application that shows content on the basis of the component type(Header, Text, Image) in my JSON file. I need to scroll spy on the Header component that has my headings.
I am using Bootstrap Vue Scrollspy ( https://bootstrap-vue.js.org/docs/directives/scrollspy/) and I have issues with the scrollspying, as in the highlighting of the menu item when the referenced item is reached. On inspecting my CSS, every time I scroll down to the second header, my second header in my sidebar becomes active(this is fine) but my first header still remains to stay active. Usually, the first header should turn back to normal. But in my case, all my headers are active in my sidebar when I reach the bottom of the page. Maybe it's because of dynamic data and because Vue sees them all as different components and it doesn't really know that the referenced item has passed already? I tried wrapping up my Header Component in a <div>, <section> but nothing seems to work. Would appreciate some help. Thanks!
This is what I have:
<template>
<div>
<div v-sticky class="sidebar_content">
<h5>Side Bar</h5>
<div
v-for="(item, index) in article.mainContent['en']"
id="side_bar_list"
:key="index"
>
<div v-if="item.component === 'heading'"> <--- Scrollspy menu on my sidebar
<b-list-group v-b-scrollspy>
<b-list-group-item
:href="`#header-${index}`"
>{{ item.settings.text }}</b-list-group-item
>
</b-list-group>
</div>
</div>
<div v-for="(item, index) in article.mainContent['en']" :key="index">
<image-component v-if="item.component === 'image'">{{
item.settings.image.path
}}</image-component>
<header-component <--- This is what I am scrollspying on
v-if="item.component === 'heading'"
:id="`header-${index}`"
>{{ item.settings.text }}</header-component>
<text-component
v-if="item.component === 'text'"
>{{ item.settings.text }}</text-component>
</div>
</div>
</template>
You need to move your v-b-scollspy directive to your sidebar wrapper element:
<div v-sticky class="sidebar_content" v-b-scrollspy>
<h5>Side Bar</h5>
<b-list-group id="side_bar_list">
<template v-for="(item, index) in article.mainContent['en']">
<b-list-group-item
v-if="item.component === 'heading'"
:key="index"
:href="`#header-${index}`"
>{{
item.settings.text
}}</b-list-group-item>
</template>
</b-list-group>
</div> <!-- end of side bar -->
<!-- main content divs -->
<div v-for="(item, index) in article.mainContent['en']" :key="index">
<image-component v-if="item.component === 'image'">{{
item.settings.image.path
}}</image-component>
<header-component
v-if="item.component === 'heading'"
:id="`header-${index}`"
>{{
item.settings.text
}}</header-component>
<text-component v-if="item.component === 'text'">{{
item.settings.text
}}</text-component>
</div>
I'm designing an application for mobile phones using cordova. I've made some good progress where I can transition between state to state inside my side menu content while still having drawer working. The way I have the interface designed is to have the side drawer and header bar be loaded once and the side menu content be the area of state transitions. I could not get my content to display below the header bar so I padded it down. However the issue is when I push things down the state transition animation pads also, oddly I tested menu-close directive in the tag, so it seems like the padded area is holding previous state of side menu content. I would prefer not use use menu-close so I don't reset the history stack on my states.
<ion-side-menus animation="no-animation" enable-menu-with-back-views ="true" >
<!--Ion Side Menu Content Houses the content for the main page-->
<ion-side-menu-content style="padding-top:45px">
<div menu-close style="padding-top:59px" >
<ion-nav-view > --Here
</ion-nav-view>
</div>
<ion-header-bar class ="bar-balanced">
<div class ="buttons">
<button class ="button icon button-clear ion-navicon-round" ng-click="openDrawer()"></button>
</div>
<h1 class="title" style="text-align: center">Medroid</h1>
<div class="buttons widget-container content-area horiz-area wrapping-col" >
<button class ="button" ng-click="openPopover($event)" ng-controller = "notificationPopoverCtrl">
<i class ="icon button-dark ion-ios-bell"></i></button>
<button class ="button" ng-click="openPopover($event)" ng-controller ="InboxPopoverCtrl"><i class ="icon button-dark ion-email"></i> </button>
<button class ="button" ng-click="changeStatus()"><i class ="icon ion-ios-circle-filled {{statuscolor}}"></i>{{docstatus}}</button>
</div>
</ion-header-bar>
</ion-side-menu-content>
<!--Ion Side menu drawer content-->
<ion-side-menu side ="left">
<ion-header-bar class ="bar-positive">
<h1 class="title" style="text-align: center" >Menu</h1>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>
Here is a link to my plunker where I've implemented this.
Plunker
You're help would be greatly appreciated
Cheers,
Solved the issue by removing the top padding and replace it with margin top.
<ion-nav-view style ="margin-top:43px">