Material Design 的搜索框

MDUI 没有，所以照着官方的组件贴片做出来一个。

需要与 MDUI 配合使用，兼容暗色模式。

CSS 代码：

.mdui-appbar-with-searchbar {
  padding-top: 64px;
}
.search-bar {
  display: flex;
  margin: 7px 8px 8px;
  height: 49px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .24);
  background: #FAFAFA;
  align-items: center;
  border-radius: 2px;
}
.search-bar > input {
  flex: 1 1;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font-family: Roboto;
  font-size: 14px;
  line-height: 100%;
  margin: 0 16px;
  outline: none;
  color: rgba(0, 0, 0, .87);
}
.search-bar > input::placeholder {
  color: rgba(0, 0, 0, .54);
}
.search-bar > .mdui-icon {
  margin: 0 16px;
}
.search-bar > .mdui-btn-icon {
  margin: auto 11px;
}
/*暗色模式支持*/
.mdui-theme-layout-dark .search-bar {
  background: #424242;
}
.mdui-theme-layout-dark .search-bar > input {
  color: white;
}
.mdui-theme-layout-dark .search-bar > input::placeholder {
  color: rgba(255, 255, 255, .70);
}

使用方法：在引入上边的 CSS 代码后，在需要插入的位置插入下边这样的代码，并按需修改。

<div class="search-bar">
  <i class="mdui-icon material-icons mdui-text-color-theme-icon">search</i>
  <input placeholder="Search something" />
  <button class="mdui-btn mdui-btn-icon mdui-ripple mdui-text-color-theme-icon" mdui-tooltip="{content: '语音输入'}">
    <i class="mdui-icon material-icons">keyboard_voice</i>
  </button>
</div>

如果你希望让它作为应用栏常驻在页面顶部，这样写：

<body class="mdui-appbar-with-searchbar">
    <!--如果 body 里的类是 mdui-appbar-with-toolbar 的话，在窄屏幕上可能会有内容被搜索框挡住-->
    <header class="mdui-appbar mdui-appbar-fixed mdui-shadow-0">
        <!--.mdui-appbar 自带阴影，需要去掉-->

        <!--这里复制粘贴上边的 HTML 代码即可-->
    </header>
</body>

技术分享

作品分享