Стиль Vuetify RTL

08.11.2017 06:48:18 Просмотров 21 Источник

Я новичок в vuetify. Мне нужно rtl v-текстовое поле с надписью сверху справа. Как же это возможно? Я не мог этого сделать в "инспекторе". Это то, что у меня есть сейчас:

enter image description here

Любая помощь будет оценили

У вопроса есть решение - Посмотреть?

Ответы - Стиль Vuetify RTL / Vuetify RTL style

kamiyar

13.11.2017 08:20:26

сейчас для 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;
}

но это еще не все. но исправьте некоторые проблемы

Является ответом!
DotBot

09.10.2018 11:36:29

Добавлены функции в v1.1.0:

  • Vuetify поддерживает языки RTL (справа налево) через RTL prop во время начальной загрузки. Это значение является динамическим и будет применять пользовательские стили для изменения ориентации ваших компонентов.

Чтобы включить поддержку RTL уровня конфигурации, добавьте свойство rtl в параметры экземпляра Vuetify:

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

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

Вы можете изменить это значение в любое время, непосредственно изменив свойство $vuetify.rtl из вашего приложения.

ronlut

31.07.2019 09:56:58

Для Vue 2.х, Как установить РТЛ правда-это немного разные вещи:

// src/plugins/vuetify.js

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

Vue.use(Vuetify)

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

или, как и раньше, вы можете изменить значение rtl для объекта vuetify: this.$vuetify.rtl = true

Aalkhodiry

17.03.2020 03:34:54

Если вы используете последнюю версию nuxt.js с vuetify вы можете добавить это в nuxt.config.js

buildModules: [
  ['@nuxtjs/vuetify', { rtl: true }],
  ...
],
Закрыть X