iView - Как использовать в макете RTL?

Question

iView - Как использовать в макете RTL?

1

Я создаю арабский сайт с Vue.js, и я использую компоненты iView для пользовательского интерфейса, но проблема в том, что он предназначен для макетов LTR а арабский - RTL. Как преобразовать компоненты iView в RTL?

Пример: я хочу, чтобы кнопка поиска в поле ввода слева на этом веб-сайте "теперь справа",

Ameer Taweel 31 окт. 2018, в 20:01

Источник

0

с какой проблемой вы столкнулись, не могли бы вы предоставить код или снимки экрана?
Boussadjra Brahim 31 окт. 2018, в 19:42
0

Я добавил ссылку для моего сайта выше, я хочу перевернуть поле ввода по горизонтали.
Ameer Taweel 01 нояб. 2018, в 14:23

Теги:

javascript

vue.js

css

frontend

web

1 ответ

Ещё вопросы

с какой проблемой вы столкнулись, не могли бы вы предоставить код или снимки экрана?
Я добавил ссылку для моего сайта выше, я хочу перевернуть поле ввода по горизонтали.

Boussadjra Brahim · Answer 1 · 2018-11-01T12-53-00.000Z

Вы можете просто использовать атрибут dir='rtl' например <i-input dir="rtl".../> но проблема заключается в том, что кнопка поиска не подходит должным образом, поэтому для исправления добавьте некоторые правила CSS, как я сделал в следующем рабочем примере:

var Main = {

}

var Component = Vue.extend(Main)
new Component().$mount('#app')

@import url("//unpkg.com/iview/dist/styles/iview.css");
#app {
  padding: 32px;
}



.ivu-input-group-append,
.ivu-input-group>.ivu-input:last-child {
  border-radius: 4px 0 0 4px!important;
 
}
.ivu-input-search::before{
width:0;
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
  <div>
    <i-input search enter-button search placeholder="ابحث عن طريق الإسم أو المدينة" dir="rtl" />

  </div>
</div>

Наконец-то это сработало, спасибо.