I'm trying to drag a v-chip in vue using the draggable lib, but it doesn't work :(
when I put the draggable tag before the Combobox tag, I can see that the Combobox can be drugged.
but I need to be able to drug the chips...
attached here my HTML code:
<v-combobox
style="
padding-right: 30px !important;
padding-left: 30px !important;
"
v-model="chips"
:items="items"
chips
clearable
color="#0D47A1"
label="Your actions..."
multiple
readonly="true"
>
<template
v-slot:selection="{ attrs, item, select, selectedSetups }"
style="font-size: 14px; font-family: 'Segoe UI Emoji'"
>
<draggable v-model="chips"
#start="dragging = true"
#end="dragging = false">
<v-chip
v-bind="attrs"
:input-value="selectedSetups"
color
close
label
#click="select"
#click:close="RemoveRequirement(item)"
outlined
>
<span>{{ item.category }}</span
>
<v-divider
class="mx-4"
color="black"
inset
vertical
v-show="item.value.toString() != ''"
></v-divider>
<span>{{ item.value.toString() }}</span>
</v-chip>
</draggable>
</template>
</v-combobox>
any idea what's wrong here?
would be very grateful for the help
Related
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;
}
I have a group of v-chip in a v-tab, on the v-chip I have an icon - the icon color is changed when clicking on him.
my problem: if I click on one icon, the color is changed but when I move to the other tab, the icon color returns back to the base color.
any idea how can I save the icon color when moving tabs?
Attached here my code:
SetContinueInError(myChip, e) {
var target = e.target || e.srcElement;
myChip.continueInError = myChip.continueInError == true ? false : true;
target.style.color = myChip.continueInError == true ? "yellow" : "gray"
},
<!-- begin snippet: js hide: false console: true babel: false -->
<v-tab v-for="item in items" :key="item.index" #click="latest = false">
<span style="
font-size: 16px;
font-weight: bold;
font-family: 'Segoe UI Emoji';
text-transform: capitalize;
float: left;
">{{ item.tab }}</span
>
</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item v-for="item in items" :key="item.index">
<v-row>
<v-col cols="3" sm="4" v-if="tab!=5&&tab!=6&&tab!=7">
<v-autocomplete
style="margin-left: 15px"
v-model="categories[tab]"
:items="FiltersLists[tab]"
:label="tab != 0 ? 'Name' : 'Filter By'"
item-text="category"
solo
></v-autocomplete>
</v-col>
<v-col cols="3" sm="4" v-if="tab == 0">
<v-autocomplete
style="margin-left: 5px"
v-model="values[tab]"
:items="ValuesLists"
label="Options"
solo
></v-autocomplete>
</v-col>
<v-col
cols="3"
:sm="tab == 5 ? 8 : 4"
v-if="tab != 0 && tab != 2 && tab != 4"
>
<v-text-field
:style="tab==5||tab==6 || tab==7 ? 'margin-left:15px' : ''"
:disabled="latest"
v-model="values[tab]"
:label="tab==5 ? 'Type your Command here':tab==6?'Type kit version':tab==7?'Enter kit path...':'Your version...'"
solo
></v-text-field>
</v-col>
<v-col cols="3" sm="4" v-if="tab!=0&&tab!=2&&tab!=4&&tab!=5&&tab!=6&&tab!=7">
<v-switch
style="margin-top: 4px !important"
v-model="latest"
#change="
latest ? (values[tab] = 'Latest') : (values[tab] = '')
"
label="Latest"
></v-switch>
</v-col>
<v-col cols="3" sm="4" v-if="tab == 5|| tab==6">
<v-radio-group
v-model="categories[tab]"
column
style="margin-top: 2px !important"
>
<v-radio
style="font-family: 'Segoe UI Emoji'; color: black"
:label="tab==5?'Controller':'Corporate'"
:value="tab==5 ? 'RunCmd - CNT':'ME driver - Corporate'"
></v-radio>
<v-spacer></v-spacer>
<v-radio
style="
color: black !important;
font-family: 'Segoe UI Emoji';
"
:label="tab==5?'DUT':'Consumer'"
:value="tab==5?'RunCmd - DUT':'ME driver - Consumer'"
></v-radio>
<v-radio
v-if="tab==6"
style="
color: black !important;
font-family: 'Segoe UI Emoji';
"
label="Slim"
value="ME driver - Slim"
></v-radio>
</v-radio-group>
</v-col>
<v-col cols="3" sm="4" style="margin-left: 18px !important">
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-chip
v-on="on"
class="ma-2"
style="font-size: 20px"
height="20px"
pill
clickable
:color="
categories[tab] == '' || categories[tab] == null
? ''
: 'orange'
"
#click="AddRequirement()"
outlined
label
>
<md-icon
:class="
categories[tab] == '' || categories[tab] == null
? ''
: 'blinking'
"
>add</md-icon
>
</v-chip>
</template>
Add requirement
</v-tooltip>
</v-col>
</v-row>
<span v-if="chips.length>0" style="margin-left: 15px; font-size: 16px">Your Actions:</span>
<v-card class="scroll" height="230px" width="700px" style="margin-left: 15px">
<v-icon #click="chips=[]" style="float: right;">close</v-icon> <br>
<span v-if="chips.length==0" style="margin-left: 15px; margin-down:10px !important; font-size: 16px">Your Actions:</span><br v-if="chips.length==0"><br v-if="chips.length==0">
<div>
<draggable :list="chips">
<v-flex v-for="chip in chips" :key="chip.category">
<v-chip style="margin-left:10px;" v-model="chip.name" color label close #click:close="RemoveRequirement(chip)" outlined class="mb-2">
<span>{{ chip.category }}</span
>
<v-divider
class="mx-4"
color="black"
inset
vertical
v-show="chip.value.toString() != ''"
></v-divider>
<span>{{ chip.value.toString() }}</span>
<v-tooltip bottom><template v-slot:activator="{on}"><i v-on="on" class="material-icons" style="color:gray !important; margin-left:7px" #click="SetContinueInError(chip,$event)" :v-model="chip.name">error_outline</i></template>Click to continue on error</v-tooltip>
</v-chip>
</v-flex>
</draggable>
</div>
</v-card>
<v-card-actions>
<div style="padding-right: 30px !important; padding-left: 30px !important;">
<v-checkbox v-model="getHealthCheckBox" label="Run only if DUT is connected"></v-checkbox>
</div>
<v-spacer></v-spacer>
<v-chip color="#0D47A1" label class="ma-2 white--text float-right" #click="$emit('hidedialog')">Close</v-chip>
<v-chip color="#0D47A1" label class="ma-2 white--text float-right" :disabled="chips.length <= 0" #click="
StartRun(false);
waitingForWorkspaces = true;">Execute</v-chip>
</v-card-actions>
</v-tab-item>
</v-tabs-items>
I'm using v-combobox to view a list of v-chip and it looks like this:
I want to add a line break between each chips.
Here is my code:
<v-combobox
:append-icon="false"
style="
padding-right: 30px !important;
padding-left: 30px !important;
"
:search-input.sync="search"
v-model="chips"
:items="items"
chips
clearable
color="#0D47A1"
label="Your actions..."
multiple
readonly="true" :key="chips.name">
<template
v-slot:selection="{ attrs, item, select, selectedSetups }"
style="font-size: 14px; font-family: 'Segoe UI Emoji'">
<v-chip
class="list-group-item"
v-bind="attrs"
:input-value="selectedSetups"
color
label
close
#click="select"
#click:close="RemoveRequirement(item)"
outlined>
<span>{{ item.category }}</span>
<v-divider
class="mx-4"
color="black"
inset
vertical
v-show="item.value.toString() != ''"></v-divider>
<span>{{ item.value.toString() }}</span>
</v-chip>
</template>
</v-combobox>
Any idea on how to achieve that please?
I found a way to do this using css, but this also shifts the dropdown down with every selection. That is probably not desired. Try it out and see for yourself:
div[role=combobox] .v-select__slot .v-select__selections {
display: flex;
flex-direction: column;
align-items: flex-start;
}
I'm trying to create a table with header like this
I try with this code, but no luck
<q-table binary-state-sort
table-header-class="text-white bg-44b2b8 rounded"
:data="this.$store.state.apiKeyList"
:columns="columns"
:filter="filter"
row-key="name"
flat
>
<template v-slot:top>
<q-input debounce="300" color="primary" v-model="filter">
<template v-slot:prepend>
<q-icon name="search" />
</template>
</q-input>
</template>
</q-table>
in css file:
.rounded {
border-radius: 10px 10px 0px 0px;
}
any clue to achieve the rounded header?
Change table-header-class to just class for rounded class and it works
codepen - https://codepen.io/Pratik__007/pen/QWNEwmp
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>