ionic

xiaoxiao2021-02-28  16

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Title</title> <link rel="stylesheet" href="../ionic_jiabao/css/ionic.min.css"> <link rel="stylesheet" href="../ionic_jiabao/css/ionic.css"> <script src="../ionic_jiabao/js/ionic.bundle.min.js"></script> </head> <body> <!--<!–明亮的–>--> <!--<div class="bar bar-header bar-light">--> <!--<h1 class="title">新闻时间</h1>--> <!--</div>--> <!--<!–蓝色–>--> <!--<div class="bar bar-header bar-positive">--> <!--<h1 class="title">bar-positive</h1>--> <!--</div>--> <!--<!–天蓝色–>--> <!--<div class="bar bar-header bar-calm">--> <!--<h1 class="title">bar-calm</h1>--> <!--</div>--> <!--<!–绿色–>--> <!--<div class="bar bar-header bar-balanced">--> <!--<h1 class="title">bar-balanced</h1>--> <!--</div>--> <!--<!–橙黄色–>--> <!--<div class="bar bar-header bar-energized">--> <!--<h1 class="title">bar-energized</h1>--> <!--</div>--> <!--<!–红色–>--> <!--<div class="bar bar-header bar-assertive">--> <!--<h1 class="title">bar-assertive</h1>--> <!--</div>--> <!--<!–紫色–>--> <!--<div class="bar bar-header bar-royal">--> <!--<h1 class="title">bar-royal</h1>--> <!--</div>--> <!--<!–黑色–>--> <!--<div class="bar bar-header bar-dark">--> <!--<h1 class="title">bar-dark</h1>--> <!--</div>--> <!--副标题--> <div class="bar bar-header bar-positive"> <h1 class="title">Header</h1> </div> <div class="bar bar-subheader bar-assertive"> <h2 class="title">Sub Header</h2> </div> <!--浅亮色--> <div class="bar bar-footer bar-stable"> <h1 class="title">Blig</h1> </div> </body> </html> 第二个按钮 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Title</title> <link rel="stylesheet" href="../ionic_jiabao/css/ionic.css"> <script src="../ionic_jiabao/js/ionic.bundle.js"></script> </head> <body> <div class="bar bar-header"> <div class="h1 title">Button按钮</div> </div> <div class="content padding has-header"> <p> <button class="button button-small button-light">button-light(浅色的)</button> </p> <p> <button class="button button-small button-stable">button-stable(浅亮色)</button> </p> <p> <button class="button button-small button-positive">button-positive(蓝色)</button> </p> <p> <button class="button button-small button-calm">button-calm(天蓝色)</button> </p> <p> <button class="button button-small button-balanced">button-balanced(绿色)</button> </p> <p> <button class="button button-small button-energized">button-balanced(橙黄色)</button> </p> <p> <button class="button button-small button-assertive">button-balanced(红色)</button> </p> <p> <button class="button button-small button-royal">button-balanced(紫色)</button> </p> <p> <button class="button button-small button-dark">button-dark(黑色)</button> </p> <p> <button></button> </p> </div> </body> </html>第三个无背景按钮 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Title</title> <link rel="stylesheet" href="../ionic_jiabao/css/ionic.css"> <script src="../ionic_jiabao/js/ionic.bundle.js"></script> </head> <body> <div class="bar bar-header"> <div class="h1 title">Button按钮</div> </div> <div class="content padding has-header"> <p> <button class="button button-outline button-light">button-light</button> </p> <p> <button class="button button-outline button-stable">button-stable</button> </p> <p> <button class="button button-outline button-positive">button-positive</button> </p> <p> <button class="button button-outline button-calm">button-calm</button> </p> <p> <button class="button button-outline button-balanced">button-balanced</button> </p> <p> <button class="button button-outline button-energized">button-energized</button> </p> <p> <button class="button button-outline button-assertive">button-assertive</button> </p> <p> <button class="button button-outline button-royal">button-royal</button> </p> <p> <button class="button button-outline button-dark">button-dark</button> </p> <p> <button></button> </p> </div> </body> </html>第四个按钮栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Title</title> <link rel="stylesheet" href="../ionic_jiabao/css/ionic.css"> <script src="../ionic_jiabao/js/ionic.bundle.js"></script> </head> <body> <!-- 头部按钮栏 --> <div class="bar bar-header"> <div class="bar bar-header"> <div class="button-bar"> <a class="button activated">First</a> <a class="button">Second</a> <a class="button">Third</a> </div> </div> </div> <!-- 内容页上的按钮栏 --> <div class="content has-header padding"> <p> </p><div class="button-bar bar-light"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div> <p></p> <p> </p><div class="button-bar bar-stable"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div> <p></p> <p> </p><div class="button-bar bar-positive"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div> <p></p> <p> </p><div class="button-bar bar-calm"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div> <p></p> <p> </p><div class="button-bar bar-energized"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div> <p></p> <p> </p><div class="button-bar bar-balanced"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div> <p></p> <p> </p><div class="button-bar bar-assertive"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div> <p></p> <p> </p><div class="button-bar bar-royal"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div> <p></p> <p> </p><div class="button-bar bar-dark"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div> <p> <button></button> </p> </div> </body> </html>第五个头部和底部按钮 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Title</title> <link rel="stylesheet" href="../ionic_jiabao/css/ionic.css"> <script src="../ionic_jiabao/js/ionic.bundle.js"></script> </head> <body> <div class="bar bar-header"> <button class="button button-icon icon ion-navicon"></button> <div class="h1 title">Header Buttons</div> <button class="button button-clear button-positive">Edit</button> </div> <div class="bar bar-header"> <button class="button icon ion-navicon"></button> <h1 class="title">Header Buttons</h1> <button class="button">Edit</button> </div></body></html>第六个菜单 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Title</title> <link href="../ionic_jiabao/css/ionic.css" rel="stylesheet"> <script src="../ionic_jiabao/js/ionic.bundle.min.js"></script> <script type="text/javascript"> angular.module('starter', ['ionic']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { // org.apache.cordova.statusbar required StatusBar.styleDefault(); } }); }) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: "/app", abstract: true, templateUrl: "menu.html", controller: 'AppCtrl' }) .state('app.playlists', { url: "/playlists", views: { 'menuContent' :{ templateUrl: "playlists.html", controller: 'PlaylistsCtrl' } } }) // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/app/playlists'); }) .controller('AppCtrl', function($scope) { }) .controller('PlaylistsCtrl', function($scope) { console.log("PlaylistsCtrl"); $scope.playlists = [ { title: 'Reggae', id: 1 }, { title: 'Chill', id: 2 }, { title: 'Dubstep', id: 3 }, { title: 'Indie', id: 4 }, { title: 'Rap', id: 5 }, { title: 'Cowbell', id: 6 } ]; }) .controller('PlaylistCtrl', function($scope, $stateParams) { }) </script> </head> <body ng-app="starter"> <ion-nav-view></ion-nav-view> <script id="menu.html" type="text/ng-template"> <ion-side-menus> <ion-pane ion-side-menu-content> <ion-nav-bar class="bar-stable nav-title-slide-ios7"> <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button> </ion-nav-bar> <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view> </ion-pane> <ion-side-menu side="left"> <header class="bar bar-header bar-stable"> <h1 class="title">Left</h1> </header> <ion-content class="has-header"> <ion-list> <ion-item nav-clear menu-close href="#/app/search"> Search </ion-item> <ion-item nav-clear menu-close href="#/app/browse"> Browse </ion-item> <ion-item nav-clear menu-close href="#/app/playlists"> Playlists </ion-item> </ion-list> </ion-content> </ion-side-menu> </ion-side-menus> </script> <script id="playlists.html" type="text/ng-template"> <ion-view title="Playlists"> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" class="has-header"> <!-- Tab 1 content --> <ion-content> <ion-list> <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}"> {{playlist.title}} </ion-item> </ion-list> </ion-content> </ion-tab> <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline"> <!-- Tab 2 content --> <ion-content> <h1>About</h1> </ion-content> </ion-tab> <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline"> <!-- Tab 3 content --> <ion-content> <h1>Settings</h1> </ion-content> </ion-tab> </ion-tabs> </ion-view> </script> </body> </html> 第七个滑动页面<!DOCTYPE html> <html ng-app="ionic"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <script src="../ionic_jiabao/js/ionic.bundle.min.js"></script> <link rel="stylesheet" href="../ionic_jiabao/css/ionic.min.css"> </head> <body> <ion-tabs class="tabs-positive tabs-icon-top"> <ion-tab title="新闻" icon-on="ion-xbox" > <ion-view> <ion-header-bar class="bar-positive"> <h1 class="title">新闻首页</h1> </ion-header-bar> <ion-content> <a class="item item-thumbnail-left" href="#"> <img src="img/07.jpeg" width="100px"> <h2 style="color: #0c63ee">朝鲜警告美军三航母在半岛附近军演 或引发核战争</h2> <p style="color: #b2b2b2">新浪</p> </a> </ion-content> </ion-view> </ion-tab> <ion-tab title="歌曲" icon-off="ion-music-note"> <ion-view> <ion-header-bar class="bar-positive"> <h1 class="title">歌曲</h1> </ion-header-bar> <ion-content> <p>about content</p> </ion-content> </ion-view> </ion-tab> <ion-tab title="个人信息" icon-off="ion-home"> <ion-view> <ion-header-bar class="bar-positive"> <h1 class="title">个人信息</h1> </ion-header-bar> <ion-content> <p>settings content</p> </ion-content> </ion-view> </ion-tab> </ion-tabs> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-1650242.html

最新回复(0)