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;
}
Related
I am working on a project that has Vuetify as the design framework. After reading the docs and examples, I am still unsure of how to make my normal design patterns into Vuetify. I have the normal way I'd make a component below but translating it to Vuetify, I am unsure whether or not to use or for each div and just give them a class to put flex on them?
Normally, I would make my component like this:
.product-box-component {
width: 100%;
background-color: grey;
height: 90px;
display: flex;
}
.img-container {
display: flex;
align-items: center;
}
.product-info {
width: 90%;
display: flex;
flex-direction:column;
background:#cecece;
height: 100%;
justify-content: center;
}
.product-name {
align-self: center;
width: 10%
}
.product-price {
align-self: center;
}
<div class="product-box-component">
<div class="img-container">
<img src="https://previews.123rf.com/images/victoroancea/victoroancea1201/victoroancea120100059/12055848-tv-color-test-pattern-test-card-for-pal-and-ntsc.jpg" height="30" width="30"/>
</div>
<div class="product-info">
<div class="name">Prod Name</div>
<div class="color">Blue</div>
</div>
<div class="product-price">
$40
</div>
</div>
I mean there is basically no right or wrong here. I think the benefit of using vuetifys grid system is that you can understand the stylings just from looking at the html. But this can get confusing as well if overdone.
In the middle part you would need to nest multiple v-row and v-col to achieve the flex-column so my prefered way to do this is with the Vuetify flex helpers. I think according to your current workwise (which is also totally fine), you dont have to use vuetify rows and columns at all, but maybe you want to try the flex class helpers. https://vuetifyjs.com/en/styles/flex/. There's a reason they offer both for usage.
<v-row style="height: 90px; width: 100%; background-color: grey">
<v-col class="d-flex align-center">
<img src="https://previews.123rf.com/images/victoroancea/victoroancea1201/victoroancea120100059/12055848-tv-color-test-pattern-test-card-for-pal-and-ntsc.jpg" height="30" width="30"/>
</v-col>
<v-col class="d-flex flex-column justify-center" style="height: 100%; width: 90%; background: :#cecece">
<div class="name">Prod Name</div>
<div class="color">Blue</div>
</v-col>
<v-col align-self="center">
$40
</v-col>
</v-row>
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
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>
I have vuetify textfield with 1.5.x version in my codepen: https://codepen.io/handy29/pen/yLLwjGg when you hover to text field I want to be green color #6fbd44. My code so far (css):
.theme--light.v-text-field--outline > .v-input__control > .v-input__slot {
border-width: 1px;
}
.theme--light.v-text-field--outline > .v-input__control > .v-input__slot:hover {
border-style: solid;
border-color: #6fbd44;
}
html:
<div id="app">
<v-app id="inspire">
<v-form>
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6 md3>
<v-hover>
<v-text-field
outline
single-line
></v-text-field>
</v-hover>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-app>
</div>
I am using :hover but it still not working, it stay black border color. What should I do? Thanks
In vuetify textfield's hover state has been covered with following selector which is more specific selector for your textfield. So that it blocked your css rule.
.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover
In order to bypass the styling of vuetify for textfield hover you can use same selector in your css file.
.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover{
border-width: 1px;
border-style: solid;
border-color: #6fbd44;
}