search

Home  >  Article  >  Web Front-end  >  ionic subtitle bar-subheader

ionic subtitle bar-subheader

黄舟
黄舟Original
2017-02-17 13:40:301454browse

1. Example background

The title of ionic is bar-header, and the subtitle is bar-subheader


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-subheader</title>
		<link rel="stylesheet" href="../css/ionic.css" />
		<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
		<script>
			var app = angular.module("subheaderApp",["ionic"]);
			app.controller("subheaderController",function($scope){
				$scope.header = "标题";
				$scope.subheader = "副标题";
			});
		</script>
	</head>
	<body ng-app="subheaderApp" ng-controller="subheaderController">
		<p class="bar bar-header bar-assertive">
			<label class="title">{{header}}</label>
		</p>
		<p class="bar bar-subheader bar-balanced">
			<label class="title">{{subheader}}</label>
		</p>
	</body>
</html>

3. Implementation result

ionic subtitle bar-subheader


The above is the content of ionic’s subtitle bar-subheader. 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：The bottom bar-footer of ionicNext article：The bottom bar-footer of ionic

Related articles

See more