Angular Material Chips rtl

Question

Ich habe begonnen, Angular Material in meiner Anwendung zu verwenden. Ich benutze MD-Chips-Steuerelement und ich möchte es in Richtung von rechts nach links zeigen. (die Chips auf der rechten Seite und der Platzhalter auf der linken Seite) Ich habe überprüft, um angular-material.css und festgestellt, dass fast alle Direktiven dir = rtl Stile, aber MD-Chips haben nicht.

Hat jemand dieses Problem?

Danke, Alex

Answer 1

Wenn Sie RTL Unterstützung oder etwas ähnliches wie es mit scharfkantigem Material der Chip-Komponente wollen, müssen Sie einige Eigenschaften ändern.

Ich bin mir sicher, dass es eine elegantere Lösung gibt, aber diese Lösung ist ziemlich robust.

hier ist der Code, den ich hinzugefügt:

SCSS

ich dies aus Gründen der Klarheit in SCSS schrieb. Wenn Sie regelmäßig die CSS verwenden, können Sie auf view compiled in der codepen Demo klicken I

hinzugefügt

md-chips.rtl { 
    .md-chips md-chip { 
     float: right; 

     ._md-chip-remove-container { 
      right: initial; 
      left: 4px; 
     } 

     &:not(.md-readonly) ._md-chip-content { 
      margin-left: 24px; 
     } 
    } 

    ._md-chip-input-container { 
     float: right; 

     input { 
      direction: rtl; 
     } 
    } 
} 

Außerdem in meinem html, füge ich die rtl Klasse für diese arbeiten:

<md-chips class="rtl" ...>...</md-chips> 

und wenn ich eine benutzerdefinierte Chip-Vorlage, auch ich dir = „auto“, um es hinzuzufügen, damit es auf die Richtung des Textes basierend auf dem Inhalt entscheiden

<md-chip-template dir="auto">...</md-chip-template> 

wenn Sie nur die Richtung ersetzen möchten der Inp ut und Chips, sondern verwenden eine LTR Sprache, kann man einfach die float: left aller Chips ändern und die Eingabe:

.md-chips md-chip { 
    float: right; 
} 

.md-chips ._md-chip-input-container { 
    float: right; 
} 

hier eine Arbeits Demo mit beiden RTL und LTR-Chips. Beachten Sie, dass die Nur-Lese-Checkbox ziemlich nett mit den RTL-Chips funktioniert auch

http://codepen.io/neilkalman/pen/WxjQqg?editors=1100