md-input中的清除按钮

时间:2015-05-11 08:05:52

标签: angularjs angular-material

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

2 个答案:

答案 0 :(得分: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,以便不会剪裁图标。

答案 1 :(得分:1)

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

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