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;
}
Related
I need to place content inside v-app-bar inside container, so It goes in one line with other page content. All content inside app should have max width for each breakpoint instead of full page width. Placing all content iside container don't solve problem.
I marked with red box on screenshot where content should be.
Hey I am having the same issue. I came up with a rough work around, my question is here incase you found an answer as well.
Make vuetify app bar items align with <v-container> body content
My solution looks like so:
The colors show the nav bar width adjusted to match the body. The code looks like so:
<template>
<v-sheet color="red">
<v-container class="pa-0">
<v-app-bar
dense
flat
color="blue accent-4"
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</v-sheet>
</template>
For others looking to only constrain the content of the v-app-bar, I found a good example over at https://vuetifyjs.com/en/examples/wireframes/constrained/ (as Ari pointed out in the comment for the main question):
<template>
<v-app-bar app>
<v-container class="pa-0 fill-height">
<!-- [...] -->
</v-container>
</v-app-bar>
</template>
I got mine to work and also keep the navbar background extended to the edge of the screen. You can put a container inside the app-bar but it messes with the flexbox of the items so you just have to put a v-row inside for them to align properly.
<template>
<nav class="toolbar" align="center">
<v-app-bar app>
<v-container>
<v-row align="center">
<v-app-bar-title>
<!-- Title-->
</v-app-bar-title>
<div>
<!-- Left side content -->
</div>
<v-spacer />
<div>
<!-- Right side content -->
</div>
</v-row>
</v-container>
</v-app-bar>
</nav>
</template>
<style scoped>
.v-container {
max-width: 60% !important;
}
</style>
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>
So i have been attempting to create a V-Card in vuetify with a specific layout. The top part of the card will vary in size and therefore I need to be able to align the bottom part of the card to the bottom.
So i've tried to do the following code here which should allow the first part to "grow" to fill the height and then the second part to "shrink" and stay at the bottom...
However, no success.. I probably just have done something sligthly wrong here but I'm pulling out my hair...
Here is my code:
<v-card shaped color="white" height="100%" width="100%">
<v-container fluid>
<v-layout column>
<v-flex grow>
{{ skinName }}
<v-img :src="skinImage" />
</v-flex>
<v-flex shrink>
<v-chip
class="ma-2"
color="indigo"
text-color="white"
>
<img height="10px" src="~static/logo-icon.png"> {{ priceInCoins | decimalPlace }}
</v-chip>
</v-flex>
</v-layout>
</v-container>
As you can see from my image, the blue "coins" should all align at the bottom in the same place no matter how big the text is above it!
Let me know if you need any more information.
Your container is not filling the height of the card, so there is no 'empty space' for the flexbox to redistribute. You can use the fill-height attribute on both the layout and the container element to make sure it stretches.
I have 4 cards (3 in the first row, 1 in second). Every time I resize my browser window my v-card-actions contents do not react. In pictures, this is when everything is ok:
And this is when I resize my browser window:
And finally here's my code:
.vue
<v-container
grid-list-lg
>
<v-layout
row
wrap
>
<v-flex
v-for="teacher in teachers"
:key="teacher.firstName"
md-4
xs4
>
<v-card
flat
tile
>
<v-img
:src='teacher.src'"
height="260px"
></v-img>
<v-card-title
primary-title
class='blue--text'
>
Dr. {{teacher.firstName}} {{teacher.lastName}}, {{teacher.specialty}}
</v-card-title>
<v-card-text class='body-1'>
M.S at {{teacher.ms}} <br>
M.S.C at {{teacher.msc}}
</v-card-text>
<v-card-actions>
<v-btn
flat
small
color='indigo darken-4'
>
More
</v-btn>
<v-spacer></v-spacer>
<v-btn
flat
small
color='indigo darken-4'
>
Schedule an Appointment
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
<script>
data() {
return {
teachers:[
{firstName:'Jon', lastName:'Doe', specialty:'PE', ms:' University of Georgia',
msc:'University of Georgia', src:'https://source.unsplash.com/kmuch3JGPUM'},
{firstName:'Maria', lastName:'Doe', specialty:'Philology', ms:'University of Atlanta',
msc:'University of Atlanta ', src:'https://randomuser.me/api/portraits/women/3.jpg'},
{firstName:'Jon', lastName:'Jon', specialty:'Mathematics', ms:'University of Michigan',
msc:'University of Michigan', src:'https://source.unsplash.com/Jy4ELSGPHTc'},
{firstName:'Peter', lastName:'Xavier', specialty:'Mathematics',
ms:'University of Miami', msc:'University of Miami',
src:'https://randomuser.me/api/portraits/men/71.jpg'},
{firstName:'Peter', lastName:'Miros', specialty:'Mathematics', ms:'University of Miami',
msc:'Georgetown University', src:'https://randomuser.me/api/portraits/men/20.jpg'},
}
]
}
The <v-card-actions> element does react to browser width changes.
What you are seeing is an issue with the Vuetify <v-button> element as it does not (by default) wrap text to fit.
You have a few options:
Add custom CSS for your buttons to accommodate - tricky and a bit too much hacking for my liking.
Make your own button element just for this - seems overkill, but I've done this when I also want a button to stand out or look different enough to Vuetify's standard.
Modify your button text to be shorter - Try one word like "Booking" or "Appointments", and even modify the text (or change to an icon) depending on screen size if you want to get fancy.
Personally, I'd recommend option 3.
EDIT: Added xs12 sm6 md4 sizing and some minor formatting changes to highlight different elements
<v-container grid-list-lg>
<v-layout row wrap>
<v-flex v-for="teacher in teachers" :key="teacher.firstName" xs12 sm6 md4>
<v-card>
<v-img :src="teacher.src" height="260px "></v-img>
<v-card-title primary-title class='blue--text'>
Dr. {{teacher.firstName}} {{teacher.lastName}}, {{teacher.specialty}}
</v-card-title>
<v-card-text class='body-1'>
M.S at {{teacher.ms}} <br> M.S.C at {{teacher.msc}}
</v-card-text>
<v-card-actions>
<v-btn outline color='blue'>
More...
</v-btn>
<v-spacer></v-spacer>
<v-btn outline color='green'>
Appointments
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
I have tested this and there is no size below 300px (minimum for v-card) where the buttons don't look fine.
Made a codepen for you too.
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>