ionic使用记录-----.bar

最新推荐文章于 2018-05-31 21:53:24 发布

mainpro126

最新推荐文章于 2018-05-31 21:53:24 发布

阅读量1.1k

点赞数

分类专栏： .bar ionic

ionic 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

.bar

0 篇文章 0 订阅

订阅专栏

一 .bar : 位置

ionic使用以下样式定义条块的位置：

.bar-header - 置顶
.bar-subheader - header之下置顶
.bar-footer - 置底
.bar-subfooter - footer之上置底

在腾讯新闻App中，你可以看到，使用了三个条块：标题、副标题、页脚：

sub-header

<!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-positive">
    <h1 class="title">腾讯新闻</h1>
    <a class="button button-clear icon ion-ios-gear"></a>
</div>
<div class="bar bar-subheader bar-stable">
    <div class="button-bar">
        <a class="button button-balanced">要闻</a>
        <a class="button button-clear">财经</a>
        <a class="button button-clear">娱乐</a>
        <a class="button button-clear">体育</a>
        <a class="button button-clear">科技</a>
    </div>
</div>
<div class="bar bar-footer bar-dark">
    <div class="button-bar">
        <a class="button button-clear icon ion-document-text">新闻</a>
        <a class="button button-clear icon ion-images">图片</a>
        <a class="button button-clear icon ion-chatbox-working">话题</a>
        <a class="button button-clear icon ion-radio-waves">热点</a>
    </div>
</div>
</body>
</html>


二    .bar : 嵌入子元素在ionic中，有三种.bar子元素的样式是预定义的：
 
 标题文字 - 对包含标题文字的元素应用.title样式，通常使用h1元素：
  
  <any class="bar">
    <any class="title">...</any>
</any>
 
 按钮 - 对用作按钮的元素，应用.button样式，通常使用button或a元素作为按钮。注意按钮将使用.bar的配色方案：
  
  <any class="bar">
    <any class="button">...</any>
</any>
 
 工具栏 - 工具栏包含一组按钮。对用作工具栏的元素，应用.button-bar样式，通常使用div元素作为工具栏：
  
  <any class="bar">
    <any class="button-bar">...</any>
</any>
 <!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>
<div class="bar bar-header bar-dark">
    <h1 class="title">Header</h1>
    <button class="button icon ion-plus"></button>
</div>
<div class="bar bar-footer bar-dark">
    <div class="button-bar">
        <a class="button button-clear icon ion-ios-chatbubble-outline">Chat</a>
        <a class="button button-clear icon ion-ios-list-outline">Address</a>
        <a class="button button-clear icon ion-ios-eye-outline">Discovery</a>
        <a class="button button-clear icon ion-ios-person-outline">Profile</a>
    </div>
</div>
</body>
</html>
三   .bar : 嵌入input一种常见的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">
</div>
</body>
</html>

mainpro126

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic使用记录-----.bar

一 .bar : 位置ionic使用以下样式定义条块的位置：.bar-header - 置顶.bar-subheader - header之下置顶.bar-footer - 置底.bar-subfooter - footer之上置底在腾讯新闻App中，你可以看到，使用了三个条块：标题、副标题、页脚：html>html>head> meta name=
复制链接

扫一扫

专栏目录