logo标签列表

Vuetify RTL样式

vue.jstextfieldright-to-leftvuetify.js
12

我是vuetify的新手。我需要在右上角添加标题的rtl v-text-field。这可能吗？我无法在检查器中做到这一点。目前我的情况如下：

输入图像描述

非常感谢任何帮助。

嘿，@HoseinPanahi，如果你觉得我的回答有帮助，请将其标记为正确答案，谢谢 :) - Shaya
7个回答
18

v1.1.0 新增功能：

  • Vuetify 通过启动时的 rtl prop 支持 RTL（从右到左）语言。该值具有动态性，会应用自定义样式来改变组件的方向。

若要启用配置级别的 RTL 支持，请在 Vuetify 实例选项中添加 rtl 属性：

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

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

您可以通过直接修改应用程序中的$vuetify.rtl属性随时更改此值。

4
如果您正在使用最新版本的nuxt.js和vuetify，您可以在nuxt.config.js中添加以下内容。
buildModules: [
  ['@nuxtjs/vuetify', { rtl: true }],
  ...
],
4

对于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

2

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

这不是完整的，但修复了一些问题。

dir=rtl是什么意思？如果我想要为我的日期选择器组件添加自定义样式，该怎么办？ - Akin Hwan
1
现在已经有了：）它已经在v1.1.0中添加：https://libupdate.com/libs/38f99a55-a650-4d67-8e60-cd3c2737d043 - Shaya
2

您应该为输入组件使用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/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>

实际上，这比改变整个应用程序的方向为RTL更好。 - Samad
0
下面的示例演示了如何在不切换当前语言的情况下，通过使用v-locale-provider组件来强制特定部分的内容从右到左显示：
<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>
0
只需为元素或容器标签使用text-right类。
<p class="text-right">این متن فارسی است</p>

如需更多信息，您可以访问此链接 rtl-alignment

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接