ionic

最新推荐文章于 2022-09-15 11:07:06 发布
最新推荐文章于 2022-09-15 11:07:06 发布
阅读量227 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gh323093/article/details/78543931
版权 
<!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>
<!--&lt;!&ndash;明亮的&ndash;&gt;-->
<!--<div class="bar bar-header bar-light">-->
    <!--<h1 class="title">新闻时间</h1>-->
<!--</div>-->
<!--&lt;!&ndash;蓝色&ndash;&gt;-->
<!--<div class="bar bar-header bar-positive">-->
    <!--<h1 class="title">bar-positive</h1>-->
<!--</div>-->
<!--&lt;!&ndash;天蓝色&ndash;&gt;-->
<!--<div class="bar bar-header bar-calm">-->
    <!--<h1 class="title">bar-calm</h1>-->
<!--</div>-->
<!--&lt;!&ndash;绿色&ndash;&gt;-->
<!--<div class="bar bar-header bar-balanced">-->
    <!--<h1 class="title">bar-balanced</h1>-->
<!--</div>-->
<!--&lt;!&ndash;橙黄色&ndash;&gt;-->
<!--<div class="bar bar-header bar-energized">-->
    <!--<h1 class="title">bar-energized</h1>-->
<!--</div>-->
<!--&lt;!&ndash;红色&ndash;&gt;-->
<!--<div class="bar bar-header bar-assertive">-->
    <!--<h1 class="title">bar-assertive</h1>-->
<!--</div>-->
<!--&lt;!&ndash;紫色&ndash;&gt;-->
<!--<div class="bar bar-header bar-royal">-->
    <!--<h1 class="title">bar-royal</h1>-->
<!--</div>-->
<!--&lt;!&ndash;黑色&ndash;&gt;-->
<!--<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>


gh323093
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android:Ionic框架使用实例
偶是不器的博客
02-11 2814
Android:Ionic框架实例
ionic 知识
10-30
### ionic3知识详解 #### 一、绪论 **Ionic**是一款强大的开源框架，用于构建跨平台的移动应用程序。它结合了AngularJS、HTML5和Sass等现代Web技术，使得开发者能够利用熟悉的Web技术栈来开发高性能的移动应用。 ...
ionic--学习
fupo
09-11 1613
ionic默认组件样式都很基础，又用了Shadow DOM。官网提供的自定义属性无法满足设计需求。网上看了很多文章，demo也写了不少，最后总结一下。 在官方文档中提供的自定义属性 + 组件自身的属性，能满足部分更改需求。 截取部分： 一、例：更改某个按钮左右间距 在按钮自身的自定义属性中有如下两条正好复合需求 // html <ion-button color="primary" size="small" class="apply-btn" (click)="create()">创建&lt
ionic 安装
GY的的专栏
12-15 679
本站实例采用了ionic v1.0.1 版本，下载地址为：ionic-v1.0.1.zip。 ionic 最新版本下载地址：http://ionicframework.com/docs/overview/#download。 下载后解压压缩包，包含以下目录： css/ => 样式文件 fonts/ => 字体文件 js/
ionic基础
最新发布
IT从业者
09-15 756
ionic基础
ionic项目
weixin_42429288的1博客
07-17 261
ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。 1.ionic 基于Angular语法，简单易学。 2.ionic 是一个轻量级框架。 3.ionic 完美的融合下一代移动框架，支持 Angular...
Ionic 打包流程
紫竺的博客
07-29 618
cmd命令窗口 1.进入项目目录 ionic platform add android 加载Android项目打包文件 2.添加白名单（默认会添加） cordova plugin remove cordova-plugin-whitelist 执行cordova plugin add cordova-plugin-whitelist 安装cordova-plugin-whitelist...
ionic报错记录
qq_24401529的博客
07-06 975
1，由于界面样式和布局很相似，所以就把html和scss从一个界面复制到新界面，后来修改新界面的scss的样式，一直不生效，经过查找原因，是因为新建的page的样式文件的selector居然是之前的界面的，所以导致修改样式一直不生效 2.用ion-toolbar设置页面标题和返回图标，并且给toolbar下面的布局设置非白色后，跳转其他界面在返回有头部有空白闪现，即之前的页面的头部先变白然后才恢...
Ionic
良_123的专栏
12-22 503
Ionic：高级的 HTML5 移动APP（Web App）开发框架 2013/12/01 分类：前端开发, 开发工具 浏览：12,293次  来源：原创 2个评论 12,293 0 4.80 / 5 5 4.80分(5票) 6 Ioni
ionic4升级到ionic5踩坑记录
博客简介
05-30 2411
ionic3升级到ionic4之后，大半年没升级了，一直用的版本是"@ionic/angular":"4.11.7"。 ionic4这个版本总体感觉还行，比较大的一个问题是，页面会飘，如果在ngOnInit里面渲染数据，在ionViewDidEnter则没有这个问题，但页面渲染会慢半拍。具体也没研究到底是什么问题，貌似主要是在苹果手机上有问题。自带的返回按钮偶尔也会自动消失，后来没用官方的返回按钮组件。 这几天不少项目发现头部标题开始飘了，后来发现是因为苹果系统升级后才出现这个问题，ionic升级到最.
简单实现IONIC购物车功能
08-31
在本文中，我们将深入探讨如何使用IONIC框架来创建一个简单的购物车功能。IONIC是一个流行的开源框架，用于构建高性能的混合移动应用。通过结合HTML、CSS和JavaScript，我们可以利用IONIC的强大功能来构建用户友好的...
ionic小助手
07-13
【Ionic小助手】是一款专为 Ionic 框架开发者设计的实用工具，旨在简化项目管理中的常见任务，如更改应用图标、定制启动画面以及快速构建测试版本。通过使用这款工具，开发者可以更高效地进行项目迭代，提升开发效率...
IONIC
03-12
标题"IONIC"指的是Ionic框架，这是一个开源的移动应用开发框架，主要用来构建跨平台的混合式移动应用。它基于Web技术（HTML、CSS、JavaScript），结合AngularJS（早期版本）或Angular（最新版本）以及Cordova/ ...
ionic 列表
01-06
ionic 列表 列表是一个应用广泛的界面元素，在所有移动app中几乎都会使用到。 列表可以是基本文字、按钮，开关，图标和缩略图等。 列表项可以是任何的HTML元素。容器元素需要list类，每个列表项需要使用item类。 ...
ionic4和ionic5创建login跳转到tabs
07-22
在网上找了很长时间，但找到的ionic登陆页login跳转到tabs的方法在ionic4上基本都无效，后来终于找到了解决这个问题的办法，简单易行，前两天发表了一篇ionic4和ionic5创建login登陆页跳转到tabs方法的博客，现在写...
Ionic开发APP之启动时白屏,如何处理.zip
01-09
在开发基于Ionic框架的应用程序时，开发者可能会遇到一个常见的问题：APP在启动时出现白屏现象。这不仅影响用户体验，也可能让初次接触Ionic的人感到困惑。本文将详细讲解如何处理这个困扰，主要针对 Ionic App 的...
ionic3仿京东商城源码
03-29
《基于Ionic3构建的仿京东商城源码解析》 在移动应用开发领域，Ionic框架以其强大的功能和跨平台特性受到了广泛关注。本篇文章将深入探讨一个使用Ionic3开发的仿京东商城源码，这对于想要学习和掌握Ionic3技术的...
精通Ionic 2：权威指南
"Mastering Ionic 2: The Definitive Guide 是一本由James Griffiths编写的，由SaintsatPlay Limited出版的关于Ionic 2框架的深入指南。这本书于2017年1月出版，旨在帮助读者从基础到高级逐步掌握Ionic 2，通过3个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值