MDUI
首页
注册

Material Design 的搜索框

学神之女
举头望涵涵,低头思第一。 https://www.dffzmxj.com
2021-07-18 06:49:51

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

resize,m_lfit,w_702,h_0,limit_1
效果图

需要与 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>