ionic教程 .bar 中嵌入input

作者:本站编辑发布时间:2015-11-24 来源:本站原创点击数:

一种常见的UI模式是在标题栏中嵌入搜索栏，比如大众点评：

dianping

在.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">
</div>
</body>
</html>

本文责任编辑：加入会员收藏夹点此参与评论>>