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

Question

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

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

Answer 1

Вы можете просто использовать атрибут 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>