Home > Article > Web Front-end > The bottom bar-footer of ionic
The bottom bar-footer of ionic
- 黄舟Original
- 2017-02-17 13:35:001053browse
1. Example background
The ionic title is bar-header, the subtitle is bar-subheader, and the bottom title is bar-footer
2. Implementation source code
##
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ionic之底部bar-footer</title>
<link rel="stylesheet" href="../css/ionic.css" />
<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
<script>
var app = angular.module("footerApp",["ionic"]);
app.controller("footerController",function($scope){
$scope.header = "标题";
$scope.subheader = "副标题";
$scope.footer = "底部";
});
</script>
</head>
<body ng-app="footerApp" ng-controller="footerController">
<p class="bar bar-header bar-dark">
<label class="title">{{header}}</label>
</p>
<p class="bar bar-subheader bar-calm">
<label class="title">{{subheader}}</label>
</p>
<p class="bar bar-footer bar-energized">
<label class="title">{{footer}}</label>
</p>
</body>
</html>
3 ,Achievement result
## The above is the bottom bar-footer of ionic For more related content, please pay attention to the PHP Chinese website (www.php.cn)!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：ionic style buttonNext article：ionic style button