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>