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

理解Ionic框架的Bar组件及其应用

最新推荐文章于 2018-11-09 14:17:50 发布

转载最新推荐文章于 2018-11-09 14:17:50 发布 · 1.2k 阅读

ionic 同时被 2 个专栏收录

9 篇文章

订阅专栏

.bar

0 篇文章

订阅专栏

本文深入探讨了Ionic框架中的Bar组件的使用方法，包括条块位置定义、子元素样式、嵌入输入元素以及如何在实际项目中应用这些组件以实现高效布局和交互。以腾讯新闻App为例，展示Bar组件在构建现代移动应用界面中的关键作用。

一 .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>