Question

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

我将示例从documentation复制到一个配有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>

Answer 1

这似乎是Framework7中的一个错误。 CSS＆＃39;对＆＃39;并且＆＃39;离开＆＃39;第一个和最后一个属性＆＃39; .picker-column＆＃39;不适合RTL布局（翻转）。附件修复解决了它。

＆＃13;

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
});

＆＃13;

.picker-column.picker-column-first:after{
  left:100% !important;
  right:0 !important;
}
.picker-column.picker-column-last:after{
  left:0 !important;
  right:100% !important;
}

＆＃13;

<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>

＆＃13;

编辑： github issue

具有相关值的RTL选择器

1 个答案: