为了账号安全,请及时绑定邮箱和手机立即绑定

Ionic2基础学习之Toolbar

Ionic2组件之Toolbar

A Toolbar is a generic bar that is positioned above or below content. Unlike a Navbar, a toolbar can be used as a subheader. When toolbars are placed within an <ion-header> or <ion-footer>, the toolbars stay fixed in their respective location. When placed within <ion-content>, toolbars will scroll with the content.

toolbar可以放在内容的上面或者下面,不像Navbar组件,toolbar可以拿来作为wubheader使用。当toolbar被放在<ion-header><ion-footer>中时,toolbars显示在头部或者尾部,当它被放在<ion-content>中时,toolbars跟着内容一起滚动.

Buttons in a toolbar

toolbar中的按钮需要放在<ion-buttons>元素中(除了menuToggle按钮)
<ion-buttons>有以下几个属性:

  • start : 按钮显示在“开始”位置,也就是在ios系统中显示在左边,在安卓或winPhone的时候显示在右边
  • end : 按钮显示在“结束”位置,也就是在ios系统中显示在右边,在安卓或winPhone的时候显示在左边
  • left : 固定显示在左边
  • right : 固定显示在右边
    如:
    <ion-toolbar> 
    <ion-title mode="ios">
        注册页面
    </ion-title>
    <ion-buttons start>
        <button ion-button color="primary" (click)="goBack()"><ion-icon name="undo"></ion-icon></button>
    </ion-buttons>
    </ion-toolbar>
Header / Footer Box Shadow

在安卓模式下,<ion-header>将会在下方出现阴影,<ion-footer>将会在上面出现阴影,可以用no-shadow来隐藏阴影。
如:

<ion-footer no-shadow>
    <ion-toolbar>
        <ion-title>Footer</ion-title>
    </ion-toolbar>
</ion-footer>
Toolbar Borders

文档中说,在ios模式下,<ion-toolbar>会产生border,因此需要使用no-border,no-border-topno-border-bottom来分别消除上下border,上面的border或下面的border
但是我无论是在网页中还是XCode的Simulator中,都看不到任何border。

demo

html:

<ion-header>
    <ion-toolbar> 
        <ion-title mode="ios">
            注册页面
        </ion-title>
        <ion-buttons start>
            <button ion-button color="primary" (click)="goBack()"><ion-icon name="undo"></ion-icon>返回</button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list>
        <ion-item>
            <ion-label floating color="danger">用户名</ion-label>
            <ion-input type="text" clearInput></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating color="danger">密码</ion-label>
            <ion-input type="text" clearInput></ion-input>
        </ion-item>
    </ion-list>

</ion-content>
<ion-footer no-shadow>
    <ion-toolbar>
        <ion-title>copyright liuzhuang 2016</ion-title>
    </ion-toolbar>
</ion-footer>

typescript:

import {Component} from '@angular/core';
import {NavController,ViewController} from 'ionic-angular';
@Component(
{
    selector:"register-page",
    templateUrl:"register.html"
})

export class RegisterPage{
    constructor(private NavCtrl:NavController,private ViewCtrl:ViewController){

    }
    goBack(){
        this.ViewCtrl.dismiss();
    }
}
完整demo

地址
个人博客

点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消