I'm having trouble solving one of the problems I've been given.
I can't see my index page in the pages folder, where could the problem come from?
index.vue
<template>
<h1>
Hello world
</h1>
</template>
I made another page with about address but it still had this problem.
Update
default.vue
<template>
<v-app :dark="setTheme" class="d-print-none" :rtl="true">
<v-toolbar
dense
flat
color="#fafafa00"
style="position: fixed; top: 0px; right: 0px; z-index: 5;"
>
<v-menu offset-y transition="slide-y-transition">
<template #activator="{ on }">
<v-btn class="ma-2 d-print-none" small text icon v-on="on">
<v-icon>mdi-apps</v-icon>
</v-btn>
<template>
<my-menu-app/>
</template>
</template>
<menuCard/>
</v-menu>
</v-toolbar>
</v-app>
</template>
Your problem is your layout.
add Nuxt tag for render your page.
<template>
<v-app :dark="setTheme" class="d-print-none" :rtl="true">
<v-toolbar
dense
flat
color="#fafafa00"
style="position: fixed; top: 0px; right: 0px; z-index: 5;"
>
<v-menu offset-y transition="slide-y-transition">
<template #activator="{ on }">
<v-btn class="ma-2 d-print-none" small text icon v-on="on">
<v-icon>mdi-apps</v-icon>
</v-btn>
<template>
<my-menu-app/>
</template>
</template>
<menuCard/>
</v-menu>
</v-toolbar>
<Nuxt/> // add Nuxt tag in your layout
</v-app>
</template>
Related
Have an interesting case where when I hover over a v-list-item in my application, all the items in the v-list's background are changing to a different shade. It is a global application issue as it happens in all areas of my application.
I've inspected other v-list items that are behaving as expected and I don't see any styles that are missing.
Ideally, I'd like my v-list to behave as expected and shade only the one v-list item as it normally does but just do not know where to begin my search.
Any help would be appreciated.
<template>
<v-card elevation="0">
<v-card-text>
<v-row>
<v-col cols="12" class="d-flex gap align-center my-0 py-0">
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" icon>
<v-icon>
{{ mdiDotsVertical }}
</v-icon>
</v-btn>
</template>
<v-list class="py-0 my-0">
<v-list-item #click="showAdvancedEditDialog = true">
<v-icon class="mr-2" color="primary">
{{ mdiPencil }}
</v-icon>
<div color="primary" class="overflowText">
Advanced
</div>
</v-list-item>
<v-list-item #click="showHtmlEditDialog = true">
<v-icon class="mr-2" color="primary">
{{ mdiCodeTags }}
</v-icon>
<div color="primary" class="overflowText">
HTML Edit
</div>
</v-list-item>
</v-list>
</v-menu>
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<style>
.overflowText {
font-size: 14px;
font-family: Roboto;
text-transform: uppercase;
font-weight: 500;
color: #f2545b;
}
</style>
this is the first time i post here. I have tried to do this for 2 days but it has been very difficult for me. I am using Vuetify and v-tabs component to show some stuff like this:
EXAMPLE
As you can see the background's card is black and i want to change it to transparent so the background html which is a linear gradient between blue/purple/black shows...
I have tried adding background-color: transparent to v-tab-item just like i did above in the v-tab "Material Clase/Material Complementario" but i don't know why it isn't applied to the v-tab-item below
This is my code:
<template>
<v-app style="background-color: rgba(30, 30, 30, 0.3);">
<v-tabs fixed-tabs background-color="transparent" color="green" slider-color="purple">
<v-tab>Material Clases</v-tab>
<v-tab-item >
<div class="mb-5 p-3">
<h3 class="mb-3">Guias de clases</h3>
<div class="row">
<div
v-for="(item, i) in items"
:key="i"
class="col-sm-12 col-md-6 col-lg-4"
>
<v-card
class="mx-auto background-tr borde-claro"
max-width="1000"
elevation="15"
outlined
>
<v-list-item three-line >
<v-list-item-content>
<div class="text-overline mb-4 tx-white">
{{ item.title }}
</div>
<v-list-item-title class="text-h5 mb-1 tx-white">
Clase: {{ item.clase }}
</v-list-item-title>
<v-list-item-subtitle class="tx-white">
Descripcion: {{ item.descripcion }}
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar
tile
size="50"
color="grey"
></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn class="tx-white borde-claro centrar" outlined rounded text >
Descargar
</v-btn>
</v-card-actions>
</v-card>
</div>
</div>
</div>
</v-tab-item>
</v-app>
</template>
As you can see i give to v-tabs the background-color to transparent and it works because it shows the background from the root (linear gradient colors) but if i give a background-color transparent to v-tab-item it doesn't work because i keep seeing the BLACK background like the screenshot i uploaded...
Thanks in advance !!
in vuetify you can't change the v-tab-item background-color because its possible to change it in v-tab-items element. This is what I did:
<v-tabs v-model="userProfileTabs" :show-arrows="false" color="#E30E4F" background-color="transparent" dark>
<v-tab to="#tabs-1"><b>TAB 1</b></v-tab>
<v-tab to="#tabs-2"><b>TAB 2</b></v-tab>
</v-tabs>
<v-tabs-items v-model="userProfileTabs" id="custom-tab-items">
<v-tab-item value="tabs-1">
</v-tab-item>
<v-tab-item value="tabs-2">
</v-tab-item>
</v-tabs-items>
I assigned and id value "custom-tab-items" to the element. Then, I customize the background color with css:
<style>
#custom-tab-items {
background-color: transparent !important;
}
</style>
use this style for dark and light theme to change all style of v-tabs:
.theme--dark.v-tabs-items {
background-color: transparent !important;
}
.theme--light.v-tabs-items {
background-color: transparent !important;
}
Neither establish a space immediately before or within a link nor any kind of link works fine while using links within the label attribute - It only checks the box. Using mousewheel works. How to target a new tab with simple leftclick?
<v-checkbox
v-model="checkbox"
:rules="[v => !!v || 'Its required!']"
label=""
required
>
<template v-slot:label>
URL_A
<v-btn href="/#/URL" target="_blank" > URL_B </v-btn>
<navigation-link url="/#/URL" target="_blank">
URL_C
</navigation-link>
</template>
</v-checkbox>
This will not work. When you associate a <label> element with a checkbox <input> (which is what Vuetify is doing behind the scenes), clicking on the label is supposed to toggle the value of the checkbox. It cannot also be a link because then the click action would be ambiguous. If someone clicks the link, should it open the link or toggle the checkbox? It appears that toggling the checkbox wins in this case.
If you need link text to go next to your checkbox, it has to be its own separate element. You can use CSS to get the two elements to line up:
<v-row>
<v-col cols="12">
<v-checkbox
v-model="checkbox1"
color="primary"
:rules="[v => !!v || 'Its required!']"
required
>
<template #label>
This link cannot be clicked
</template>
</v-checkbox>
</v-col>
<v-col cols="12">
<v-checkbox
v-model="checkbox1"
class="pa-0 ma-0"
color="primary"
:rules="[v => !!v || 'Its required!']"
required
style="float: left;"
></v-checkbox>
This link CAN be clicked
</v-col>
</v-row>
There's a working demo in this codeply.
Just use #click.stop on the link:
<v-checkbox v-model="checkbox">
<template v-slot:label>
<a href="/#/URL" target="_blank" #click.stop> URL_A </a>
</template>
</v-checkbox>
It´s done by using a modal:
<v-container v-if="showModal" class="modal-mask white--text">
<transition name="modal">
<v-container >
<v-container class="modal-wrapper">
<v-container class="modal-dialog">
<v-container class="modal-content">
<v-container class="modal-header">
<h4 class="modal-title">Title</h4>
</v-container>
<v-container class="modal-body">
Lorem ipsum
</v-container>
<v-container two-line>
<v-btn color="primary" class="close" #click="showModal=false">
<span>Close</span>
</v-btn>
</v-container>
</v-container>
</v-container>
</v-container>
</v-container>
</transition>
</v-container>
<script>
export default {
data: () => {
return {
showModal: false
}
}
}
</script>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0%;
left: -10px;
height: 100%;
max-width: none;
background-color: rgba(0, 0, 0, .8);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: top;
}
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 500px;
overflow-y: auto;
}
</style>
The title pretty much says it all - I'd like to add a couple of fab buttons to the table footer (with which I plan to CRUD records in the table). Ideally I'd like to move the Rows per page and pagination to the left, and add my buttons in on the right, but at this point I'm willing to settle for adding my buttons on the left.
I looked at the documentation on data table slots, and I thought that body.append or footer might do it, but couldn't figure out how to translate them into my project, as they don't provide any mark up in the API section (only javascript objects) and none of the examples below the API section has what I'm looking for either.
Here's the code I'm currently using, in case it helps:
<v-data-table
v-model="selected"
item-key="id"
class="elevation-1"
:headers="headers"
:items="items"
:search="search"
:sort-by="['expiry.millis', 'label']"
:sort-desc="[false, true]"
multi-sort
show-select
>
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>Inventory</v-toolbar-title>
<div class="flex-grow-1"></div>
<v-text-field v-model="search" append-icon="mdi-magnify" label="Search" hide-details class="half-width"></v-text-field>
<div class="flex-grow-1"></div>
<v-btn color="error" small fab dark v-if="selected.length > 0"><v-icon>mdi-delete-outline</v-icon></v-btn>
<v-btn color="deep-purple accent-4" small fab dark class="ml-1"><v-icon>mdi-plus</v-icon></v-btn>
</v-toolbar>
</template>
<template v-slot:item.expiry="{ item }">
{{ item.expiry.until }}
<v-icon :title="item.expiry.date.format('DD/MM/YYYY')">mdi-information-outline</v-icon>
</template>
</v-data-table>
As you can see I currently have my buttons in the toolbar, along with the table name and a search bar.
I'm using Vuetify: 2.0.0. Let me know if I need to include any other information and I'll gladly update my question.
There is markup for body.append here:
https://codepen.io/pen/?&editable=true&editors=101
taken from the page you linked to, the point is it should look like this:
<template v-slot:body.append>...
I faked the buttons with adding v-card under the data table. check my pen
https://codepen.io/rveruna/pen/jONewxj
<div id="app">
<v-app>
<v-content>
<v-container>
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</template>
<v-card style="border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0px 5px 1px -2px rgba(0, 0, 0, 0.2), 0px 5px 2px 0px rgba(0, 0, 0, 0.14), 0px 5px 5px 0px rgba(0, 0, 0, 0.12);">
<v-card-text>
<div style="position: absolute; top: -42px" class="body-1 font-weight-bold">
<v-icon class="mdi-18px roundedIcon success" style="color: white">mdi-check</v-icon> Selected domains:
</div>
<template>
<v-chip class="mr-2 mb-2" close>blb</v-chip>
</template>
<template>
<v-chip class="mb-2" close>and bla more</v-chip>
</template>
</v-card-text>
<v-card-actions class="actionsDetails" style="background: rgb(249, 249, 249); border-top-left-radius: 0; border-top-right-radius: 0">
<v-spacer></v-spacer>
<v-btn text normal >Export All</v-btn>
</v-card-actions>
</v-card>
</v-container>
</v-content>
</v-app>
</div>
Using the suggestion of #MarcelusTrojahn, I've used a <v-data-table /> inside a <v-card>. The table would be enclosed in the <v-card-text> and the buttons container at the end
For instance :
<div id="app">
<v-app id="inspire">
<v-content>
<v-card>
<v-card-text class="table-container">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</v-card-text>
<div class="buttons-container">
<v-btn color="primary" class="footerBtn">
<v-icon right dark style='margin-right: 5px;'>mdi-chevron-left</v-icon>Prev
</v-btn>
<span class="footerBtn pageCount">{{ `${currentPageFrom} - ${currentPageTo}` }}</span>
<v-btn color="primary" class="footerBtn">Next<v-icon right dark>mdi-chevron-right</v-icon></v-btn>
</div>
</v-card>
</v-content>
</v-app>
</div>
See the codepen attached : https://codepen.io/bertrandmartel/pen/mdJYaBO
Good day,
This way I have the template in one component.
<template>
<v-card fluid>
<div class="text-xs-center">
<v-btn outline small fab color="indigo" #click="abrirmodalBusqueda()">
<v-icon>search</v-icon>
</v-btn>
</div>
<div id="map">
<l-map style="height: 500px; width: 100%" :zoom="zoom" :center="center" #update:center="centerUpdate">
<l-tile-layer :url="url"></l-tile-layer>
<l-marker :lat-lng="marker" >
<l-popup>Estoy en estas coordenadas asadsad {{latitud}}</l-popup>
</l-marker>
<l-marker v-for="marker in markers" :lat-lng="marker">
<l-popup>Estoy en estas coordenadas asadsad {{marker.lat}}
<v-flex xs12 sm4 text-xs-center>
<div>
<v-btn small color="primary" #click="dialogParqueos = true">Seleccionar</v-btn>
</div>
</v-flex>
</l-popup>
</l-marker>
</l-map>
</div>
</v-card>
</template>
When using the property of height in px and not in% I can already visualize the map l-map style = "height: 500px" since if I use 100% the map can not be seen. The problem that when making use of v-navigation-drawer the map is assembled in the following way:
As you notice, it overlaps the left panel. For the map I am using the Vue2Leaflet library. Thank you in advance.
SOLUCION:
<v-container>
<v-card
class="pa-3"
flat
height="550px"
width="100%"
>
<l-map style="height: 100%; width: 100%; position: sticky !important;" :zoom="zoom" :center="center">
<l-tile-layer :url="url"></l-tile-layer>
<l-marker :lat-lng="markerLatLng" ></l-marker>
</l-map>
</v-card>
</v-container>
add position:sticky !important; in the style.