【问题标题】：Angular Material Chips rtl角材料芯片 rtl
【发布时间】：2016-06-25 20:11:27
【问题描述】：

我已经开始在我的应用程序中使用 Angular Material。我正在使用 md-chips 控件，我想以从右到左的方向显示它。（右边的筹码和左边的占位符）我查看了 angular-material.css，发现几乎所有指令都有 dir=rtl 样式，但 md-chips 没有。

有人遇到过这个问题吗？

谢谢，亚历克斯

【问题讨论】：

标签： css angularjs material-design angular-material

【解决方案1】：

如果你想使用 Angular Material 的芯片组件支持 RTL 或类似的东西，你需要更改一些属性。

我确信有一个更优雅的解决方案，但这个解决方案非常强大。

这是我添加的代码：

SCSS

为了清楚起见，我用 SCSS 写了这个。如果你使用的是普通的 css，你可以在我添加的 codepen 演示中点击view compiled

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

此外，在我的 html 中，我添加了 rtl 类以使其工作：

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

如果我使用的是自定义芯片模板，我还会在其中添加 dir="auto"，以便它根据内容决定文本的方向

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

如果你只想替换输入和芯片的方向但是使用LTR语言，你可以改变所有芯片和输入的float: left：

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

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

这是一个使用 RTL 和 LTR 芯片的工作演示。请注意，只读复选框也适用于 RTL 芯片

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

【讨论】：