ionic 头部内容尾部

全栈若城

发布于 2024-02-29 18:14:29

640

发布于 2024-02-29 18:14:29

文章被收录于专栏：若城技术专栏若城技术专栏

引入

ionic 的css js 和angularJS 这三个文件

头部写法

<ion-header-bar align-title="center" class="bar-positive">
		            <div class="buttons">
		                <button class="button" ng-click="doSomething()">左侧按钮</button>
		            </div>
		            <h1 class="title">Title!</h1>
		            <div class="buttons">
		                <button class="button">右侧按钮</button>
		            </div>
		        </ion-header-bar>

内容区域

<ion-content>
			一些内容!
		</ion-content>

尾部区域

<ion-footer-bar align-title="left" class="bar-positive">
		  <div class="buttons">
		    <button class="button">左侧按钮</button>
		  </div>
		  <h1 class="title">Title!</h1>
		  <div class="buttons" ng-click="doSomething()">
		    <button class="button">右侧按钮</button>
		  </div>
		</ion-footer-bar>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-02-29，如有侵权请联系 cloudcommunity@tencent.com 删除

class