Vuetify RTL风格

5lhxktic 于 2023-10-23 发布在 Vue.js

关注(0)|答案(7)|浏览(192)

我是Vuetify的新手。我需要与它的右上角标题rtl v文本字段。这怎么可能呢？我不能在督察。这就是我现在所拥有的：

任何帮助都将不胜感激

vue.js

来源：https://stackoverflow.com/questions/47183969/vuetify-rtl-style

7条答案

按热度按时间

xcitsw881#

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属性来更改此值。

赞(0）回复(0）举报 2023-10-23

nnsrf1az2#

对于Vue 2.x，将RTL设置为true的方法是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,
})

或者，像以前一样，你可以修改vuetify对象上的rtl值：this.$vuetify.rtl = true

赞(0）回复(0）举报 2023-10-23

46scxncf3#

如果你正在使用最新的nuxt.js和vuetify，你可以在nuxt.config.js中添加这个

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

赞(0）回复(0）举报 2023-10-23

vuv7lop34#

目前还没有RTL支持Vuetify。但是你可以创建你自己的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;
}

还不完整但解决一些问题

赞(0）回复(0）举报 2023-10-23

w46czmvw5#

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

赞(0）回复(0）举报 2023-10-23

kg7wmglp6#

下面的示例演示了如何通过使用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>

赞(0）回复(0）举报 2023-10-23

enxuqcxy7#

只对元素或容器标记使用文本右类

<p class="text-right">این متن فارسی است</p>

欲了解更多信息，您可以访问此链接rtl-alignment

赞(0）回复(0）举报 2023-10-23

我来回答

Vuetify RTL风格

7条答案

相关问题

热门标签

最新问答