Menu
I am new to vuetify. I need rtl v-text-field with top-right caption on it. How is that possible? I could not do that in inspector. This what i have for a now:
Any help would be appreciated
509
You should use reverse property for input components. Also, don't forget to change the text direction of input. Here is an example:
input{
direction: rtl;
}
.v-list-item__content{
text-align: right
}<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-row>
<v-col cols="4" right order="2">
<v-select
reverse
outlined
:items="drinks"
label="نوشیدنی"
>
</v-select>
</v-col>
<v-col order="1">
<v-text-field
reverse outlined
label="توضیحات"
placeholder="شرایط نوشیدنی مطلوب شما"
>
</v-text-field>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
drinks: ['چای', 'قهوه']
}
})
</script>
</body>
</html>If you are using the latest nuxt.js with vuetify you can add this in nuxt.config.js
buildModules: [
['@nuxtjs/vuetify', { rtl: true }],
...
],
Added features in v1.1.0:
- Vuetify supports RTL (right to left) languages through the rtl prop during bootstrap. This value is dynamic and will apply custom styles to change the orientation of your components.
To enable config level RTL support, add the rtl property to the Vuetify instance options:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
rtl: true
})
You can change this value anytime by directly modifying the $vuetify.rtl property from within your application.
18
For Vue 2.x, the way to set RTL to true is a bit different:
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
rtl: true,
})
or, as before, you can modify the rtl value on the vuetify object: this.$vuetify.rtl = true
3
there is no RTL support for vuetify right now. but you can create your own CSS and change what you need. first of all: add dir=rtl to your app and add this styles:
textarea:focus, input:focus, button:focus { outline: none !important; }
.list__tile__title {
text-align: right;
}
.toolbar__title {
margin-right: 16px;
}
.input-group--text-field label {
position: absolute;
top: 18px;
right: 0;
}
.input-group label {
text-align: right;
-webkit-transform-origin: top right;
transform-origin: top right;
}
.input-group.input-group--selection-controls label{
right: 32px;
left: auto;
}
.input-group.input-group--selection-controls .icon--selection-control {
left: auto;
right: 0;
}
.input-group--selection-controls__ripple {
-webkit-transform: translate3d(12px,-52%,0);
transform: translate3d(12px,-52%,0);
left: auto;
right: 0;
}
it's not complete. but fix some issues
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
