Vuetify RTL 风格

Question

我是 vuetify 新手。我需要带有右上角标题的 rtl v-text-field 。这怎么可能？我无法在检查员中做到这一点。这就是我现在所拥有的：

如有任何帮助，我们将不胜感激

Answer 1

Vuetify 在引导期间通过 rtl 属性支持 RTL（从右到左）语言。该值是动态的，并将应用自定义样式来更改组件的方向。

要启用配置级别 RTL 支持，请将

rtl

属性添加到 Vuetify 实例选项中：

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  rtl: true
})

您可以随时通过直接修改应用程序中的

$vuetify.rtl

属性来更改此值。

Answer 2

如果您使用的是最新的 nuxt.js 和

vuetify

，您可以将其添加到

nuxt.config.js

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

Answer 3

对于 Vue 2.x，将 RTL 设置为 true 的方法有点不同：

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  rtl: true,
})

或者，像以前一样，您可以修改 vuetify 对象上的 rtl 值：

this.$vuetify.rtl = true

Answer 4

目前 vuetify 不支持 RTL。但您可以创建自己的 CSS 并更改您需要的内容。首先：将 dir=rtl 添加到您的应用程序并添加此样式：

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;
}

还不完整。但解决了一些问题

Answer 5

您应该对输入组件使用

reverse

属性。另外，不要忘记更改输入的文本方向。这是一个例子：

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>

Answer 6

以下示例演示了如何使用

v-locale-provider

组件强制对内容的特定部分进行 RTL，而不切换当前语言：

<v-app>
  <v-card>...</v-card> <!-- default locale used here -->

  <v-locale-provider rtl>
    <v-card>...<v-card> <!-- default locale used here, but with RTL active -->
  </v-locale-provider>
</v-app>

例如：

<v-locale-provider rtl>
          <v-select
            reverse
            outlined
            :items="drinks"
            label="نوشیدنی"
           >
           </v-select>
</v-locale-provider>

Vuetify RTL 风格

问题描述投票：0回答：6

6个回答

最新问题

Vuetify RTL 风格

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6