SCSS

Question

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

有人遇到这个问题吗？

谢谢，亚历

Answer 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 =＆＃34; auto＆＃34;它将根据内容决定文本的方向

<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芯片的工作演示。请注意，readonly复选框也适用于RTL芯片

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

角度材料芯片rtl

1 个答案:

SCSS