md-input 中的清除按钮

Question

搜索类型的 md 输入是否包含任何清除按钮？我知道我可以在外部或搜索输入组件中添加一个清除按钮，但我更愿意将其作为输入字段的一部分。

Answer 1

现有版本的 angular material (v0.9.0) 无法做到这一点，但针对的是 v0.10.0。在此处查看更多信息：https://github.com/angular/material/issues/2802#issuecomment-101764802

但是，有一个 Angular 指令可以用作解决方法。 https://github.com/dcohenb/angular-clear-input

Answer 2

我用负数求解margin-right

.search {
    md-content.md-default-theme {
        overflow: visible;
    }
    .search-cancel {
        color: white !important;
        fill: white;
        border: none;
        width: 16px;
        height: 16px;
        margin: 8px 0 0 -36px;
        overflow: visible;
        cursor: pointer;
        border-radius: 50%;
        transition: background 0.15s linear;
        background: rgba(0, 0, 0, 0.3);
        &:hover {
            background: rgba(255, 0, 0, 0.8) !important;
        }
    }
}

            <div layout="row" class="search">
                <md-content flex="90" layout-padding>
                    <md-input-container md-no-float>
                        <md-icon md-svg-icon="search" class="name"></md-icon>
                        <input ng-model="search" type="search" title="Search" placeholder="Search">
                    </md-input-container>
                </md-content>
                <md-content flex layout-padding>
                    <md-icon ng-show="search" md-svg-icon="md-close" class="search-cancel"
                             ng-click="search=''"></md-icon>
                </md-content>
            </div>

包含md-content的也需要overflow-visible这样图标才不会被截断。

md-input 中的清除按钮

Clear button in md-input

angularjs

angular-material