I created a LoadingOverlay component managed by Vuex. The state represents its visibility. The current overlay component uses this code
<template>
<v-dialog value="true" transition="false" fullscreen hide-overlay scrollable>
<v-card>
<v-layout justify-center align-center fill-height>
<v-progress-circular :size="80" :width="5" indeterminate color="primary"></v-progress-circular>
</v-layout>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: "LoadingOverlay"
};
</script>
I created an example showing a demo
https://codesandbox.io/s/j7jjrpw83
I would like to setup opacity for the overlay. Currently the background is white and the view gets fully covered. I want to have an opacity of 0.7 for the overlay background.
Do I have to use my own CSS or is there a ready to use opacity attribute that I can add to the overlay component?
I know I could use color="transparent" but this would be too much.
I'm not too sure if this is the best "Vue" way to do it as I've never used Vue, but you can set the color on the v-card to have a translucent background colour:
<v-card color="rgba(255, 255, 255, 0.7)">
<v-layout justify-center align-center fill-height>
<v-progress-circular :size="80" :width="5" indeterminate color="primary"></v-progress-circular>
</v-layout>
</v-card>
See fiddle
Or even using style and opacity:
<v-card style="opacity: 0.7">
<v-layout justify-center align-center fill-height>
<v-progress-circular :size="80" :width="5" indeterminate color="primary"></v-progress-circular>
</v-layout>
</v-card>
<v-card overlay-opacity="0.15">
<...>
</v-card>
Related
Context:
Hi, I am trying to use fabricjs canvas within vuetify and make it look responsive in all the screens.
But currently, I am facing an issue where the canvas is not re-sizing based on card,it overflows the card instead.
I have tried using v-responsive but it does not apply the aspect ratio to canvas, could be, the way I am using it is not the right way.
Any suggestions will be helpful.
This is what is happening now
This is what i am trying to achieve
Structure
Mock:
Code
This is what i have tried till now.
<v-layout>
<v-flex xs12>
<v-container class="red" fluid>
<v-layout row wrap align-center justify-center>
<v-flex xs3 sm3 md3 class="ma-2" class="purple">
<v-card flat tile class="yellow">
<v-card-title
id="fabric-canvas-wrapper"
class="green pb-0 justify-center"
>
<v-responsive aspect-ratio="4/3" class="mx-auto px-3">
<canvas id="c"> </canvas>
</v-responsive>
</v-card-title>
<v-card-text class="blue text-xs-center py-0">
<p class=".body-2 pa-2 text-truncate">Kangaroo Valley Safari</p>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
https://codepen.io/adatdeltax/pen/OJWOPBo
A canvas element can be sized arbitrarily by a style sheet, its bitmap is then subject to the 'object-fit' CSS property.
Source
The width/height of the canvas element are different from the width/height of the canvas element's bitmap. This means that you can use only CSS styles to fix this problem.
canvas {
width: 100%;
height: 100%;
object-fit: cover;
}
Example
If you want to maintain the aspect ratio you can use the padding trick.
.canvas-container {
width: 100%;
padding-top: 100%; // for 1:1 ratio
}
Example
Context:
Hi, I am trying to use fabricjs canvas within vuetify and make it look responsive in all the screens.
But currently, I am facing an issue where the canvas is not re-sizing based on card,it overflows the card instead.
I have tried using v-responsive but it does not apply the aspect ratio to canvas, could be, the way I am using it is not the right way.
Any suggestions will be helpful.
This is what is happening now
This is what i am trying to achieve
Structure
Mock:
Code
This is what i have tried till now.
<v-layout>
<v-flex xs12>
<v-container class="red" fluid>
<v-layout row wrap align-center justify-center>
<v-flex xs3 sm3 md3 class="ma-2" class="purple">
<v-card flat tile class="yellow">
<v-card-title
id="fabric-canvas-wrapper"
class="green pb-0 justify-center"
>
<v-responsive aspect-ratio="4/3" class="mx-auto px-3">
<canvas id="c"> </canvas>
</v-responsive>
</v-card-title>
<v-card-text class="blue text-xs-center py-0">
<p class=".body-2 pa-2 text-truncate">Kangaroo Valley Safari</p>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
https://codepen.io/adatdeltax/pen/OJWOPBo
A canvas element can be sized arbitrarily by a style sheet, its bitmap is then subject to the 'object-fit' CSS property.
Source
The width/height of the canvas element are different from the width/height of the canvas element's bitmap. This means that you can use only CSS styles to fix this problem.
canvas {
width: 100%;
height: 100%;
object-fit: cover;
}
Example
If you want to maintain the aspect ratio you can use the padding trick.
.canvas-container {
width: 100%;
padding-top: 100%; // for 1:1 ratio
}
Example
All I want is to have a carousel-item that contains two images. At the very least I want two carousels side by side. Any ideas since wrapping the carousels in row-cols or simply trying a sheet containning two images in each carousel item does not work.
EDIT : Notice how the component surpasses the right edge of the app drawer (should not happen and also on transition the background of the carousel flashes black. Ideally I get a carousel that is responsive with the two images inside transitionning without flashing black.
<template>
<v-container>
<v-row>
<v-col cols="1">
<v-btn icon large #click="toggle">
<v-icon>{{ playIcon }}</v-icon>
</v-btn>
</v-col>
<v-col>
<v-slider
color="light-green"
thumb-color="light-green accent-4"
thumb-size="30"
track-color="light-green accent-4"
v-model="run"
max="19"
:tick-labels="ticksLabels"
tick-size="6"
ticks/>
</v-col>
</v-row>
<v-carousel
:cycle="playPause"
hide-delimiters
interval=3000
v-model="run"
height="700px"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
transition="fade-transition"
reverse-transition="fade-transition"
v-for="(item,i) in items"
:key="i"
>
<v-row>
<v-card width="49%">
<v-img contain :src="item.avg"/>
</v-card>
<v-spacer></v-spacer>
<v-card width="49%">
<v-img contain :src="item.std"/>
</v-card>
</v-row>
</v-carousel-item>
</v-carousel>
</v-container>
</template>
You can fix the black flashing by adding these two props to the v-carousel
:dark="$vuetify.theme.dark"
:light="!$vuetify.theme.dark"
And to fix the scope of the component you can add this style.
<style scoped>
.v-carousel .v-window-item {
position: absolute;
top: 0;
width: 100%;
}
.v-carousel-item {
height: auto;
}
</style>
I want to remove the shadow from a Vuetify expansion panel. Currently, it looks like this:
My code looks like this:
<v-layout wrap justify-space-between>
<v-flex xs12 pb-1>
<v-card>
<v-container pa-2>
<v-expansion-panel expand pa-0>
<v-expansion-panel-content>
<template v-slot:header>
<div>
{{ $t("var1") }}
</div>
</template>
<v-layout row wrap>
<v-flex xs12>
<v-text-field
class="right-input"
:label="$t('var2')"
value="600.00"
suffix="$"
disabled
flat
></v-text-field>
</v-flex>
</v-layout>
</v-expansion-panel-content>
</v-expansion-panel>
</v-container>
</v-card>
</v-flex>
</v-layout>
It is possible to remove the shadow from the expansion panel? I tried adding "flat" to the tag but it didn't solve it. My goal is that, while expanded, it looks like a flat card. Thanks! :)
In Vuetify v.2 you can use the attribute flat in v-expansion-panels.
Documented here: https://vuetifyjs.com/en/api/v-expansion-panels/#flat
<v-expansion-panels flat>
<v-expansion-panel >
<v-expansion-panel-header>
header
</v-expansion-panel-header>
<v-expansion-panel-content>
Content
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
You can set elevation-0 class on v-expansion-panel.
Here is working example: https://codepen.io/anon/pen/oKjRpm?editors=1010
I'd rather avoid changing CSS, because it will remove all borders and shadows, on all expansion panels on all pages.
With Veutify 2 the following css does the job.
.v-expansion-panel::before {
box-shadow: none !important;
}
Put this lines of code into your CSS:
.v-expansion-panel {
box-shadow: none;
}
I have vuetify calendar component. This calendar (only on month type) is too big for mobile screen.
Helper images: image 1 image 2
this my code:
<v-layout align-space-around
justify-center
row wrap
column
fill-height>
<v-flex xs12>
<v-card flat>
<v-calendar
ref="calendar"
v-model="start"
:type="type"
:end="end"
:now="today"
:value="today"
ma-0
locale
#click:date="clickDate">
...some calendar code here...
</v-calendar>
</v-card>
</v-flex>
</v-layout>
The v-card element is rendering correctly, fits for device, but calendar takes more space (for width) that his parent (v-card).
I'll be glad for some help with that.