时间戳

首页 > 解决方案 > 具有相关值的 RTL 选择器

right-to-left - 具有相关值的 RTL 选择器

问题描述

要求是制作具有多个级别的 RTL 选择器。

我将文档中的示例复制到为 RTL 用户配备了官方框架 CSS 的页面中。

我也修改了每列的“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>

标签： right-to-leftpickerhtml-framework-7

解决方案

这似乎是 Framework7 中的一个错误。第一个和最后一个 '.picker-column' 的 CSS 'right' 和 'left' 属性不适合 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问题

推荐阅读