IONIC----06.menu-tab

最新推荐文章于 2024-06-02 17:22:30 发布
最新推荐文章于 2024-06-02 17:22:30 发布
阅读量727 收藏
点赞数
分类专栏： Ionic 文章标签： ionic menu-tab
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/damys/article/details/52032597
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

<script src="./lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/css/ionic.min.css">

<title>Ionic</title>
</head>

<body ng-app="myApp">
    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">
        <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
    </ion-nav-bar>

    <div ng-controller="MainCtrl">
        <ion-nav-view animation="slide-left-right"></ion-nav-view>
    </div>


    <script id="tabs.html" type="text/ng-template"> 
        <ion-side-menus>
            <ion-side-menu-content>
                <ion-nav-bar class="bar-positive">
                    <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
                </ion-nav-bar>

                <ion-nav-buttons side="left">
                    <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
                </ion-nav-buttons>

                <!-- 在这里加上tab -->
                <ion-tabs class="tabs-icon-top tabs-positive">
                    <ion-tab title="Home" icon="ion-home" href="#/tab/home">
                        <ion-nav-view name="home-tab"></ion-nav-view>
                    </ion-tab>

                    <ion-tab title="About" icon="icon ion-ios-person-outline" href="#/tab/about">
                        <ion-nav-view name="about-tab"></ion-nav-view>
                    </ion-tab>

                    <ion-tab title="Contact" icon="icon ion-ios-paper-outline" ui-sref="tabs.contact">
                        <ion-nav-view name="contact-tab"></ion-nav-view>
                    </ion-tab>
                </ion-tabs>


                <ion-nav-view name="menuContent"></ion-nav-view>
            </ion-side-menu-content>

            <ion-side-menu side="left">
                <ion-header-bar class="bar-assertive">
                    <h1 class="title">Left Menu</h1>
                </ion-header-bar>

                <ion-content>
                    <ul class="list">
                        <a href="#/event/check-in" class="item" menu-toggle="left">Check-in</a>
                        <a href="#/event/attendees" class="item" menu-toggle="left">Attendees</a>
                    </ul>
                </ion-content>
            </ion-side-menu>
        </ion-side-menus>   
    </script>

    <script id="home.html" type="text/ng-template">
        <ion-view title="Home">
            <ion-content class="padding">
                <h2>home.html</h2>
                <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Facts</a>
            </ion-content>
        </ion-view>
    </script>

    <script id="facts.html" type="text/ng-template">
        <ion-view title="Facts" class="padding">
        <ion-content>
            <h2>facts.html</h2>
            <a class="button icon ion-home" href="#/tab/home"> Home</a>
            <a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">Facts2</a>
        </ion-content>
        </ion-view>
    </script>

    <script id="facts2.html" type="text/ng-template">
        <ion-view title="facts2">
            <ion-content class="padding">
                <h2>facts2.html</h2>
                <a class="button icon ion-home" href="#/tab/home"> Home</a>
                <a class="button icon ion-chevron-left" href="#/tab/facts">Facts</a>
            </ion-content>
        </ion-view>
    </script>

    <script id="about.html" type="text/ng-template">
        <ion-view title="About">
            <ion-content class="padding">
                <h2>about.html</h2>
                <a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">navstack</a>
            </ion-content>
        </ion-view>
    </script>

    <script id="nav-stack.html" type="text/ng-template">
        <ion-view title="Nav Stack">
            <ion-content class="padding">
                <h2>nav-stack.html</h2>
            </ion-content>
        </ion-view>
    </script>

    <script id="contact.html" type="text/ng-template">
        <ion-view title="Contact">
            <ion-content>
                <h2>contact.html</h2>
            </ion-content>
        </ion-view>
    </script>
</body>
</html>


<script>
angular.module('myApp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('tabs', {
        url: "/tab",
        abstract: true,
        templateUrl: "tabs.html"
    })
    .state('tabs.home', {
        url: "/home",
        views: {
            'home-tab': {
                templateUrl: "home.html",
                controller: 'HomeTabCtrl'
            }
        }
    })
    .state('tabs.facts', {
        url: "/facts",
        views: {
            'home-tab': {
                templateUrl: "facts.html"
            }
        }
    })
    .state('tabs.facts2', {
        url: "/facts2",
        views: {
            'home-tab': {
                templateUrl: "facts2.html"
            }
        }
    })
    .state('tabs.about', {
        url: "/about",
        views: {
            'about-tab': {
                templateUrl: "about.html"
            }
        }
    })
    .state('tabs.navstack', {
        url: "/navstack",
        views: {
            'about-tab': {
                templateUrl: "nav-stack.html"
            }
        }
    })
    .state('tabs.contact', {
        url: "/contact",
        views: {
            'contact-tab': {
                templateUrl: "contact.html"
            }
        }
    });

    $urlRouterProvider.otherwise("/tab/home");
})

.controller('HomeTabCtrl', function ($scope) {
    console.log('HomeTabCtrl');
})
.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) {
    $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
};
});
</script>

GITHUB

damys
关注
专栏目录
ionic3 搭建tabs+sidemenu组合
荣轩浩
04-23 3888
这是解决ionic3中侧边栏Menu加上底部Tabs的组合demo搭建，这是在ionic3的官网demo中的blank的基础上搭建的组合。1：下载blank，使用ionic start sidemenuTabs blank命令下载demo遇到了错误，node-sass@4.7.2的一个错误我们顺便解决一下！运行npm install -g node-sass@4.7.2 --registry ht...
IONIC----08.route_menu_tab
Damys
07-29 457
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic
移动系统编程-Ionic 组件 (Ionic Components)
qq_54813250的博客
06-02 791
然而，ionic 组件也可能是在模板中由特殊定义的标签、属性和值组成的特定代码，这些代码自动实现或使用组件。如果安装的版本是 7.0.0 或更新版本，请注意，app.module.ts 文件将不再存在于你的应用程序的 app 文件夹中。例如，以下警报的名称为 field1，可以在“确定”按钮的处理程序中通过选择传递给处理程序的参数中的 name 进行访问。为了演示可注入组件，考虑一个 ionic 操作表作为示例，它是一个显示在当前页面上方的 ionic 组件，向用户呈现一系列操作选项。
Ionic - API
LucioCN
06-12 1935
放在前面：ionic3中文api 1.操作表：ActionSheetController 2:格  （1）垂直对齐： a.通过向行row中添加不同的属性，可以将所有列垂直对齐 align-items-start/align-items-center/align-items-center/ &lt;ion-row align-items-start&gt; ... &lt;ion-col...
ionic4.x-京东商城
神zhi殇的博客
10-14 1114
功能： 首页、分类、购物车、我的 搭建项目，增加tab4，并修改tab样式 ionic start jdshop tabs // 搭建项目 ionic g page tab4 // 第四个tab页面 添加上tab4，然后修改tab的文字和icon。 home、 ios-apps、 ios-cart、 contacts 修改tab的颜色： 1.使用自定义主题色的方法，并没有改变tab的选中颜色，所以不行。 2.修改某一类组件的颜色（ion-tab-button）。css properties .ion-c
ionic5 侧边栏ion-menu组件以及底部tabs结合侧边栏ion-menu
u010574271的博客
04-22 841
文章目录说明侧边栏ion-menu组件的基本使用新建项目侧边栏ion-menu使用点击菜单按钮弹出侧边栏侧边栏ion-menuJS实现侧边栏打开功能页面加按钮给ion-menu定义menuId属性控制菜单的页面中引入MenuController 组件初始化构造函数对应方法中通过JS控制侧边栏底部tabs结合侧边栏ion-menu新建tab项目新建页面新建侧边栏给侧边栏菜单添加链接并使其点击后侧边栏关闭 说明 对于侧边栏的相关的相关使用可以参考文档https://ionicframework.com/docs
ionic-侧滑-路由
Rbh73692的博客
10-22 347
html> html ng-app="myApp"> head> meta charset="UTF-8"> meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> link href="https://cdn.bootcss
ionic-简单购物车
Rbh73692的博客
10-20 758
//主要功能页面 html> html ng-app="BShop"> head > meta charset="UTF-8"> meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> link href="css/c
ionic-adventures
ejinxian的专栏
06-15 1525
Ionic Adventures The ultimate guide to learn Ionic and be tuned in to.Free and open source, Ionic SDK offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for bui
ionic-tutorial-tabs:教程
05-16
完成这个教程后，可以尝试将所学应用到自己的项目中，或者进一步探索Ionic的其他高级特性，如Side Menu、Modal和Popups等。 8. ** Ionic的博客资源**： 提供的博客链接是一个宝贵的资源，里面可能包含更多关于...
ionic-react-tabs-menus-custom:使用React Context API来控制侧边菜单和自定义页面内容，标签等的粗略示例
03-13
使用TabRoutes的自定义TabMenu 导航到网址（页面）或通过单击事件执行操作 使用react context api hook更改侧面菜单 每个选项卡轻松自定义侧面菜单 在TabRoutes.js tabs数组中添加一个对象，以向主tab栏中添加新的...
ionic4.x仿京东 - 2.1.首页--导航栏、轮播图、猜你喜欢、商品列表
ZYYzyy1993的博客
08-31 411
一、准备 1.定义公共样式 【src/global.scss】 body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, secti
IONIC----02.ionicBackdrop
Damys
07-11 1075
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic
IONIC----05.ionicPopover
Damys
07-25 1065
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic
IONIC----01.ionicActionSheet
Damys
07-08 850
ionicActionSheet
IONIC----13.slide3
Damys
08-08 775
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <script src="./lib/js/ioni
IONIC----15.slide5
Damys
08-10 598
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic
IONIC----04.ionicModal
Damys
07-18 568
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic
安装ionic-ios
最新发布
09-10
安装Ionic iOS涉及几个步骤，首先需要确保你的开发环境已经准备好，包括安装Node.js、npm（Node.js包管理器）、Git以及安装Xcode（苹果的集成开发环境）。以下是安装Ionic和配置iOS环境的基本步骤： 1. 安装Node.js和npm（如果还没有安装）： - 访问Node.js官网下载并安装Node.js。npm作为Node.js的一部分也会被自动安装。 - 可以通过命令行工具运行 `node -v` 和 `npm -v` 来检查是否安装成功。 2. 使用npm安装Ionic CLI（命令行工具）： - 打开终端或命令提示符，执行以下命令安装Ionic CLI： ``` npm install -g ionic@latest ``` - 运行 `ionic --version` 来验证安装是否成功。 3. 安装CocoaPods（iOS的依赖管理工具）： - 这一步仅限于Mac用户。CocoaPods用于管理iOS项目中的依赖。在终端中运行以下命令来安装CocoaPods： ``` sudo gem install cocoapods ``` - 安装完成后，运行 `pod --version` 来检查是否安装成功。 4. 创建新的Ionic项目并添加iOS平台支持： - 执行以下命令来创建一个新的Ionic项目（或者你可以克隆一个现有的Ionic项目）： ``` ionic start myApp blank --type=ionic-angular ``` - 进入项目目录： ``` cd myApp ``` - 添加iOS平台支持： ``` ionic platform add ios ``` 5. 使用Xcode打开项目并运行： - 打开Xcode，选择“Open another project...”并导航到你的Ionic项目目录中的 `/platforms/ios/` 文件夹，打开 `YourAppName.xcworkspace` 文件。 - 确保你已经有一个有效的开发者账号，并且配置了开发者证书和描述文件。 - 点击Xcode工具栏上的运行按钮（播放图标），选择一个合适的模拟器或连接的iOS设备来运行你的应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值