[tabindex，从右到左，具体化

Question

我正在将Materialize v0.97.7与Angular和Typescript一起使用时，我注意到当我将方向更改为RTL和语言以使制表符索引顺序仍然从左到右时，我曾尝试使用tabindex =“ 1”，tabindex =“ 2” .....但不起作用。那么，为什么选项卡顺序没有更改为RTL并仍然从左到右开始，尽管整个页面都更改为RTL

HTML标记：

<form autocomplete="off" #createModal="ngForm" (ngSubmit)="save()">
    <h1 mat-dialog-title>Create New </h1>
    <mat-dialog-content style="width: 100%;height:100%;">
      <mat-tab-group>
        <mat-tab [label]="'GeneralInformation' | localize">
   <div class="row" >
              <div class="col-md-6" >
                <mat-form-field appearance="standard" >
                    <mat-label>{{ "governorates" | localize }}</mat-label>
                  <mat-select required [(ngModel)]="selectedCity"  tabindex="2"
                  placeholder='{{ "governorates" | localize }}'
                  name="governorate" id="governoratesSlct" (selectionChange)='fillMains($event.value)' >
                  <mat-option *ngFor="let governorate of listOfgovernorates" [value]="governorate.tenantId" >{{governorate.governorateName}}</mat-option>
                  </mat-select>
                </mat-form-field>   
              </div>
<div class="col-md-6" >
    <mat-form-field appearance="standard" >
        <mat-label>{{ "Mains" | localize }}</mat-label>
      <mat-select required  tabindex="1"
      placeholder="'Mains' | localize '"
      name="mainProjec" id="mainSlct" #singleSelect [formControl]="mainCtrl" >
      <mat-option>
        <ngx-mat-select-search [formControl]="mainFilterCtrl"  placeholderLabel="...ابحث عن المشروع ال" ></ngx-mat-select-search>
      </mat-option>
      <mat-option *ngFor="let main of filteredMains | async" [value]="main" >{{main.name}}</mat-option>
      </mat-select>
    </mat-form-field>
</div>

            </div>
<div class="row">
  <div class="col-md-4" >
    <mat-form-field>
        <mat-label>{{ "Status" | localize }}</mat-label>
      <mat-select  [(ngModel)]="sub.StatusId" required  tabindex="5"
      placeholder='{{ "Status" | localize }}'
      name="Status" id="StatusSlct">
      <mat-option *ngFor="let Staus of listOfStatuses" [value]="Staus.id" >{{Staus.StatusDescription}}</mat-option>
      </mat-select>
    </mat-form-field>
</div>

<div class="col-md-4" >
    <mat-form-field>
        <input tabindex="4"
          matInput
          name="subNumber"
          [placeholder]="'subNumber' | localize"
          [(ngModel)]="sub.subCode"
          type="text"
          required
          minlength="2"
          maxlength="255"
        />
      </mat-form-field>
    </div>

    <div class="col-md-4" >
      <mat-form-field >
          <!-- <mat-label>{{ "Sub" | localize }}</mat-label> -->
          <input 
            matInput tabindex="3"
            name="subName"
            [placeholder]="'subName' | localize"
            [(ngModel)]="sub.subName"
            type="text"
            required
            minlength="2"
            maxlength="255"
          />
        </mat-form-field>
  </div>
</div>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
 <div mat-dialog-actions align="end">
      <button mat-button type="button" [disabled]="saving" (click)="close(false)">
        {{ "Cancel" | localize }}
      </button>
      <button
        mat-flat-button
        type="submit"
        flex="15"
        color="primary"
        [disabled]="!createModal.form.valid || saving">
       Save
      </button>
    </div>
  </form>

Answer 1

实际上我所做的是使用Flex-Layout（“ @ angular / flex-layout”：“ ^ 8.0.0-beta.26”）

注意：如果您使用Angular 8，则必须使用以上版本的flex；如果您使用Angular 9，则可以使用fles-layout 9：我将每个标签替换为以下标签：

<div class="row">

下面有一个：

<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="3.5%" fxLayoutAlign="right">

此后，您无需使用

tabindex=""

因此，将其删除。