Question

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

Answer 1

我使用否定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，以便不会剪裁图标。

Answer 2

对于现有版本的角度材料（v0.9.0），这是不可能的，但目标是v0.10.0。请在此处查看更多信息：https://github.com/angular/material/issues/2802#issuecomment-101764802

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

md-input中的清除按钮

2 个答案: