css - Angular Material 芯片 rtl

Question

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

有人遇到过这个问题吗？

谢谢， 亚历克斯

Answer 1

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

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

这是我添加的代码:

SCSS

为了清楚起见，我在 SCSS 中写了这个。如果你使用的是常规的css，你可以在我添加的codepen demo中点击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>

如果只想更换input和chips的方向，但是使用LTR语言，可以只改变所有chips的float: left和input:

.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