Vue.js - How To Use Iview In Rtl Direction?

I'm creating an Arabic website with 'Vue.js', and I use iView for UI components, but the problem is that it's designed for LTR layouts while Arabic is RTL. How can I convert iView

Solution 1:

You could simply use dir='rtl' attribute like <i-input dir="rtl" .../> but the problem is with the search button which will not fit appropriately, so to fix that add some CSS rules like i did in the following working example :

varMain = {

}

varComponent = Vue.extend(Main)
newComponent().$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: 4px004px!important;
 
}
.ivu-input-search::before{
width:0;
}

<scriptsrc="//unpkg.com/vue/dist/vue.js"></script><scriptsrc="//unpkg.com/iview/dist/iview.min.js"></script><divid="app"><div><i-inputsearchenter-buttonsearchplaceholder="ابحث عن طريق الإسم أو المدينة"dir="rtl" /></div></div>