Vuetify RTL style

user_5991801 0
Viewed 8489

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:

enter image description here

Any help would be appreciated

right-to-left vuetify.js vue.js textfield
5 Answers

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.

user_36129030

If you are using the latest nuxt.js with vuetify you can add this in nuxt.config.js 

buildModules: [
  ['@nuxtjs/vuetify', { rtl: true }],
  ...
],
user_4556540

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

user_11167360

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

user_10913180

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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: {
        drinks: ['چای', 'قهوه']
      }
    })
  </script>
</body>
</html>

user_107281840
Related