How to get rounded corners for <v-text-field> in Vuetify?
<v-flex xs12>
<v-text-field style="border-radius:50px"
label="Text field"
solo
></v-text-field>
</v-flex>
I tried border-radius property for bother the container <v-flex> and <v-text-field> itself but it did not work.
Codepen.
Whenever I need to change Vuetify styles I add a class to a containing element and then add your styles. Working with Vuetify (like any framework) can be frustrating due to specificity. In this case you need at least level 3 specificity.
template
<v-text-field
label="Text field"
solo
class="my-input"
></v-text-field>
css
.my-input.v-input .v-input__slot {
border-radius: 100px;
}
You can add the rounded property to a v-text-field (vuetify docs)
<v-text-field
label="Text field"
solo
rounded
></v-text-field>
You can do this:
<v-text-field
label="Text field"
solo
class="rounded-lg"
></v-text-field>
You can add these classes to control the border radius:
rounded-sm
rounded
rounded-lg
rounded-xl
rounded-0
I use 'rounded-0' a lot to remove pesky border radius in components like v-text-field.
Full documentation here.
Related
I recently started using vuetifyjs in my RTL project (written in Vue 2). I added a table in a card and I added the search bar as it's shown in the docs. I'm trying to do two things:
Move the "number of items to show" option from the footer to the top.
Make the search bar expendable from an icon.
Basically:
For the first case, I could not find a way to do this in the docs. For the second case, I'm trying to achieve this output:
I tried to look in the docs as well, but could not find a way to do this. I also came across with this article: Expand Searchbar with Search icon as well as show close icon onclick using Javascript
My current code:
<div>
<v-card>
<v-card-title>
<v-text-field
v-model="searchText"
append-icon="mdi-magnify"
label="חיפוש"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
class="elevation-1"
:headers="headers"
:items="items"
:items-per-page="itemsPerPage"
:footer-props="settings"
>
</v-data-table>
</v-card>
</div>
Where:
settings: {
'items-per-page-options': [10, 25, 50, 100],
'items-per-page-text': 'סהכ'
},
itemsPerPage: 10
Is it possible to achieve this using vuetify?
https://codepen.io/pradipta-chatterjee/pen/YzaJXeW
<v-text-field
v-model.trim="searchText"
dense
filled
rounded
clearable
placeholder="Search"
prepend-inner-icon="mdi-magnify"
class="pt-6 shrink expanding-search"
:class="{ closed: searchBoxClosed && !searchText }"
#focus="searchBoxClosed = false"
#blur="searchBoxClosed = true"
></v-text-field>
Check the codepen i feel, i have what you were looking for.
I am utilizing a v-navigation-drawer with the expand-on-hover prop. When it is in its mini variant, I would like to hide the textbox and button at the bottom. The navigation drawer has computed properties, one of which is isMiniVariant. Set to true when collapsed and false when expanded. How can I use this property to bind a style to the div that contains the items I would like to hide?
The codepen/code can be seen below:
https://codepen.io/emicion/pen/zYqerGo?editors=1000
<div id="app">
<v-app id="inspire">
<v-navigation-drawer permanent left app expand-on-hover dark>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-message</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="title">Application</v-list-item-title>
<v-list-item-subtitle>subtext</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<template v-slot:append>
<!-- I want to hide all of this below -->
<div class="pa-2">
<v-textarea no-resize outlined placeholder="Enter comment here..." rows="2"></v-textarea>
<v-btn dark outlined small>
<span>Add Comment</span>
</v-btn>
</div>
</template>
</v-navigation-drawer>
</v-app>
</div>
Computed properties listed on VNavigationDrawer
One way is:
add to style
.v-navigation-drawer--mini-variant .hideme {
display:none;
}
add class to the div you want to hide
<div class="pa-2 hideme">
Actually, the better way is to add v-list-group--sub-group to the class of the div
<div class="pa-2 v-list-group--sub-group">
Both are kind of hacky, but I've tried using v-list-group's directly, but it's not easy
I've two radio buttons. On the second radio button I want put 3 components and align the size width to fit on a unique line (row). They are a radio button and 2 select fields using Vuetify.
At the moment the components are on 3 rows, but I don't know how to put it into a unique row into 3 columns. I has followed the grid system from Vuetify.
<v-flex xs12>
<v-radio-group v-model="paymentType" column>
<v-radio :label="getCurrentMonthText()"></v-radio>
<v-container>
<v-row no-gutters>
<v-col cols="12" sm="4">
<v-radio label="Outro mês"></v-radio>
</v-col>
<v-col cols="12" sm="4">
<v-select label="Mês" :items="monthNames" v-model="monthSelected"></v-select>
</v-col>
<v-col cols="12" sm="4">
<v-select label="Ano" :items="years" v-model="yearSelected"></v-select>
</v-col>
</v-row>
</v-container>
</v-radio-group>
</v-flex>
Result:
If I understand your question correctly, you want to have the "Outro Mes" radio button, the "Mes" selector, and the "Ano" selector all in the same row.
Your code is doing that right now for window sizes larger than "sm" in the vuetify grid system. When I run it on my machine, I get this:
Window size larger than "sm"
Window size "sm"
If you want to have the radio button on the same row as the selects at all times, even when the window size is "sm", then you simply need to change each column to [cols="4"].
If I'm not understanding your question correctly, please leave a comment with clarification.
Am trying to add a solo textfield in a toolbar but this fails
so i have
<v-toolbar dense flat dark color="primary">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-text-field
light
solo
placeholder="Search an item here"
></v-text-field>
<v-spacer></v-spacer>
<v-divider inset
vertical
></v-divider>
<v-btn text class="text-none">
Action Menu
</v-btn>
</v-toolbar>
The above produces
which i would like centered vertically on the toolbar (like the title)
I have also tried adding a margin to the solo text field but still it doesnt center it on the toolbar.
I have made a Codepen link for the above isse
What do i need to add to it to make it center
You have to have hide-details on your v-text-field and also height of dense-ed toolbar is to small for v-text-field inside (except you use css to customize v-text-field height).
Here is simple example:
<div id="app">
<v-app>
<v-content>
<v-container style="margin-top:40px">
<v-toolbar flat dark color="primary">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-text-field hide-details solo single-line class="ml-5" light></v-text-field>
<v-spacer></v-spacer>
<v-divider inset
vertical
></v-divider>
<v-btn text class="text-none">
Action Menu
</v-btn>
</v-toolbar>
</v-container>
</v-content>
</v-app>
</div>
Using vuetify, how can I make two UI components show up on one singular page? I have tried combining elements within one bracket and got error messages. When stacking components in separate only thee bottom template appears in the front end. Is there a way two stack UI components using vue-router?
edit: my goal is to place two ui components such as photo grid and carousel from vuetify on top each other to create a print out similar to this screenshot mash-up.
This is the code that produces my current localhost printout code sample of stacking templates and the localhost printout.
<template>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-container grid-list-sm fluid>
<v-layout row wrap>
<v-flex
v-for="n in 9"
:key="n"
xs4
d-flex
>
<v-card flat tile class="d-flex">
<v-img
:src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
:lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
aspect-ratio="1"
class="grey lighten-2"
>
<v-layout
slot="placeholder"
fill-height
align-center
justify-center
ma-0
>
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-layout>
</v-img>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-flex>
</v-layout>
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
></v-carousel-item>
</v-carousel>
</template>
Your problem is you have two template tags, if you move the content of the bottom template tag into the first one it should work. It should look something like this:
<template>
<div>
<v-layout>
v-card etc...
</v-layout>
<v-carousel>
v-carousel-item etc...
</v-carousel>
</div>
</template>
<script>
javscript code...
</script>
As #sumurai8 said, you should only have one top level template tag.