RTL-подборщик с зависимыми значениями - PullRequest
Новая
       19

RTL-подборщик с зависимыми значениями

0 голосов
/ 31 мая 2018

Требуется сделать сборщик RTL с несколькими уровнями.

Я скопировал пример из документации на страницу, оснащенную официальными CSS-фреймворками для пользователей RTL.

Я также изменил свойства "textAlign" каждого столбца.По какой-то причине сборщик действует не так, как ожидалось. открыть фрагмент в режиме полной страницы . 

var app = new Framework7({
  root: '#app',
  rtl: true,
  theme: 'md'
});
app.views.create('#mainView', {
});

var carVendors = {
  Japanese: ['Honda', 'Lexus', 'Mazda', 'Nissan', 'Toyota'],
  German: ['Audi', 'BMW', 'Mercedes', 'Volkswagen', 'Volvo'],
  American: ['Cadillac', 'Chrysler', 'Dodge', 'Ford']
};
var pickerDependent = app.picker.create({
  inputEl: '#demo-picker-dependent',
  rotateEffect: true,
  formatValue: function(values) {
    return values[1];
  },
  cols: [{
      textAlign: 'right',
      values: ['Japanese', 'German', 'American'],
      onChange: function(picker, country) {
        if (picker.cols[1].replaceValues) {
          picker.cols[1].replaceValues(carVendors[country]);
        }
      }
    },
    {
      textAlign: 'right',
      values: carVendors.Japanese,
      width: 160,
    },
  ],
  routableModals:false
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/css/framework7.rtl.md.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/js/framework7.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-title">
  Dependent values</div>
<div id="app">
  <div id="mainView">
    <div class="list no-hairlines-md">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="text" placeholder="Your car" readonly="readonly" id="demo-picker-dependent" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 03 июня 2018

Это похоже на ошибку в Framework7.CSS-свойства 'right' и 'left' для первого и последнего '.picker-column' не соответствуют макету RTL (перевернуто).Прикрепленный ремонт решил это. 

var app = new Framework7({
  root: '#app',
  rtl: true,
  theme: 'md'
});
app.views.create('#mainView', {
});

var carVendors = {
  Japanese: ['Honda', 'Lexus', 'Mazda', 'Nissan', 'Toyota'],
  German: ['Audi', 'BMW', 'Mercedes', 'Volkswagen', 'Volvo'],
  American: ['Cadillac', 'Chrysler', 'Dodge', 'Ford']
};
var pickerDependent = app.picker.create({
  inputEl: '#demo-picker-dependent',
  rotateEffect: true,
  formatValue: function(values) {
    return values[1];
  },
  cols: [{
      textAlign: 'right',
      values: ['Japanese', 'German', 'American'],
      onChange: function(picker, country) {
        if (picker.cols[1].replaceValues) {
          picker.cols[1].replaceValues(carVendors[country]);
        }
      }
    },
    {
      textAlign: 'right',
      values: carVendors.Japanese,
      width: 160,
    },
  ],
  routableModals:false
});
.picker-column.picker-column-first:after{
  left:100% !important;
  right:0 !important;
}
.picker-column.picker-column-last:after{
  left:0 !important;
  right:100% !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/css/framework7.rtl.md.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.0/js/framework7.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-title">
  Dependent values</div>
<div id="app">
  <div id="mainView">
    <div class="list no-hairlines-md">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-input-wrap">
                <input type="text" placeholder="Your car" readonly="readonly" id="demo-picker-dependent" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

РЕДАКТИРОВАТЬ: выпуск github

...