您的位置：首页 > 其它

.bar : 嵌入input

2016-04-06 19:05 302 查看
一种常见的UI模式是在标题栏中嵌入搜索栏，比如大众点评：



在.bar元素中嵌入input元素，需要注意两点：

在条块元素上应用.item-input-inset样式

将input包裹在应用.item-input-wrapper样式的元素内

这是因为，在ionic的实现中，.bar中的.input 样式定义如下：

.bar.item-input-inset{
.item-input-wrapper{
.input{
...
}
}
}


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body class="stable-bg">
<div class="bar bar-header bar-energized item-input-inset">
<a class="button button-clear icon-right ion-android-arrow-dropdown">北京</a>
<label class="item-input-wrapper">
<input type="text" placeholder="输入商户名搜索">
</label>
</div>
<div class="bar bar-footer bar-dark item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="输入结束">
</label>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航