ionic学习--ion-modal

最新推荐文章于 2021-08-03 10:00:38 发布
最新推荐文章于 2021-08-03 10:00:38 发布
阅读量604 收藏 1
点赞数
分类专栏： ionic 文章标签： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43903745/article/details/109195892
版权

1、参考官方文档，依葫芦画瓢,先写构造器,再写异步方法

在这里插入图片描述
2、component属性指定一个组件用来打开页面
cssClass属性指定样式，可以改长度，宽度，背景颜色
在这里插入图片描述
上面的注释要仔细看看，第一个是不生效的，因为少了 .modal-wrapper，
并且要写到全局样式global.scss中去
3.传数据
先说A-B的情况
下图是A，使用componentProps属性，
在这里插入图片描述
下图是B，要用@Input()去接收
在这里插入图片描述
再说B-A的情况
首先A的modal监听关闭事件
在这里插入图片描述
然后B关闭的时候给A传值
在这里插入图片描述

4、关闭模态框
关闭模态框的话用dismiss方法就行了

*MaybE
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在ionic中自定义弹出框modal的样式不起作用
qq_38661056的博客
07-16 600
今天在使用ionic做一个modal模态框弹出一个选择框时，想要做一个弹出框居中并且周围半透明可以看到后面元素的内容的效果，但是发现无论如何也不能够设置这个弹出框的样式，但是又不得不做。 又发现网上几乎没有相关的文章说这个问题，于是我自己就写一篇记录一下吧。 首先看一下模态框的节点，发现是这个样子的。 怪不得样式不起作用，我先后尝试了在调用模态框的组件和模态框引用的组件里面书写css样式，但是这个模态框并不属于这两个组件中的任何一个，当然不能起作用了。 翻一下官方文档，看到了这段话。 In Angular
如何开发Ionic插件--android
02-26
本文档介绍ionic的插件模块1.1.目录结构层次1.2.插件工作原理分析1.3.数据的交互2.制作插件2.1.plugman2.2.编写插件2.3.注意事项FurtherReading1.CordovaPlugin基础IONIC下的插件都是遵循CORDOVA插件(...
ionic4 ion-modal的用法
weixin_33787529的博客
05-28 1252
组件内部示例 <ion-header> <ion-toolbar> <ion-title>条件筛选</ion-title> <ion-buttons slot="end"> <ion-button (click)="cancel()"> <ion-icon nam...
Ionic教程-modal的使用
pdw2009的专栏
08-21 9449
Ionic-modal
Angular 使用移动端ion-modal还有ion-popover组件在pad横向的时候会出现不兼容的问题，推荐使用Angular 之 Overlay
不见来去的博客
08-03 404
ion-modal组件在横向使用pad的时候，弹层是出不来的，已实践特此记录一下 ion-popover组件在横向使用pad的时候，弹出层能出来，但是滚动是有问题。 所以博主发现这些ionic提供的组件虽然好用但是有些场景的兼容性还是有待考究的 **后来博主发现Angular 提供的组件开发包就非常的强大，使用起来页非常的简单，完全可以满足使用的需求** ![在这里插入图片描述](https://img-blog.csdnimg.cn/d4d212fbf6ea48369418d7ea361787ce..
Ionic4—JS扩展之Modal以及Modal传值
雷雨天的雷胖子
11-22 441
目录 一、概述 二、详解 一、概述 Ionic4中使用ion-modal组件实现模态对话框。模态对话框允许我们在一个页面中弹出另一个页面。此处的另一个页面是指在当前模块下额外创建的一个页面组件。模态对话框的本质是一个组件中调用另一个组件。 二、详解 创建modal页面模块 执行如下所示命令创建modal模块。 > ionic g page modal 在modal模...
ionic-framework-master.zip
08-06
"ionic-framework-master.zip" 文件很可能包含了Ionic Framework的源代码仓库，通常用于开发和学习。 在解压"ionic-framework-master"后，我们可以期待找到以下关键组成部分： 1. **项目结构**：在根目录下，通常...
ionic-datepicker-oysq
06-02
"ionic-datepicker-oysq"是一个专为Ionic框架设计的日期选择器插件，它使得在Ionic应用中集成日期选择功能变得更加简单和高效。 Ionic是一款基于AngularJS的开源框架，用于构建跨平台的混合移动应用。它提供了丰富...
Ionic3-D3-Chart:Ionic3 D3.js
05-15
通过这个项目，开发者可以学习到如何在移动应用中实现复杂的数据可视化，结合Angular的强大力量和D3.js的灵活性，为用户提供直观的数据呈现方式。此外，使用TypeScript也能保证代码的质量和可维护性，使项目更加稳定...
ionic3-music-player
05-17
简单的离子音乐播放器 此示例仅适用于android Decvie。 插件：-cordova-plugin-media 5.0.2-cordova-plugin-filechooser 1.0.1-cordova-plugin-file 6.0.1-cordova-plugin-filepath 1.3.0“ andriod引擎版本：6.4.0
基于ion-modal自定义alert弹出框
L_Darker的博客
11-24 667
Ionic 1 基于ion-modal自定义alert弹出框 1.1 步骤 1.在全局css样式文件（global.scss）中定义弹出框css样式 .customModal { --background: var( --ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9) ); --max-width: 270px; --backdrop-opacity: var(--ion-backdrop-op
ionic2里面cssClass设置无效的问题
weixin_30763397的博客
03-16 449
在进行ionic2开发的时候，用到alertController组件里面的一个CSSClass的属性，发现怎么设置这个样式都是无效的，在官网上也没有看到详细的说明，最后百度的时候看见一个网友给了一个解决的方案，当使用自定义的CSSClass的时候，这个class必须写到app.scss里面， 转载于:https://www.cnblogs.com/leoshuaige/p/857...
关于ionic 4 版本对ion-Modal 模态窗的更改 无需 指定 ViewController
qq_43562926的博客
04-28 486
Ionic 4 对 ion-Modal 进行了 更改 致使 viewController 不能 够在 @Ionic/angular 中声明.对于 模态窗的关闭按钮 ，可以直接在 import { ModalController } from "@ionic/angular";进行 dismiss()； 以下看图: 这个页面为 视图 View 页面 只显示出 点击按钮 import { Compon...
ionic开发中屏幕的宽度和高度的获得
热门推荐
CapMiachael的博客
10-28 1万+
ionic开发中屏幕的宽度和高度的获得screen.width //屏幕的宽度 screen.height //屏幕的高度题外话： 这个还是很有用的，画九宫格时候需要高度，不然屏幕尺寸一换就变长方形了，九宫格的宽可以用col col-33 实现 ，高可以用屏幕宽度除以3实现，具体看需求吧。。。。
Ionic4版本更改之 Modal弹出与关闭
weixin_37632724的博客
12-13 8338
Ionic4Beta版官方文档提供了例子代码，首先定义一个ModalPage组件，并在需要弹出的组件上import该page组件，Modal框通过HTML中click点击触发异步函数presentModal()，并可以传递参数。重点与Ionic3的区别在于Modal框的关闭在Ionic4中直接modalController.dismiss()关闭而不是在ModalPage中再定义一个ViewCon...
ionic 项目中添加modal的步骤流程
weixin_30919919的博客
08-12 155
1、首先在templates文件夹下面定义一个新页面，xxx.html，template文件夹在空项目里面是没有的，需要手动添加一个，放在WWW文件夹下面。 <ion-modal-view> <ion-header-bar> <h1 class="title">My Modal title</h1> </...
ionic3 物理返回键关闭model问题
苗陈的博客
04-08 3992
1. 接下来直接上代码 import {Component, ViewChild} from '@angular/core'; import {Platform, Nav, ToastController, Keyboard, IonicApp} from 'ionic-angular'; import {StatusBar} from '@ionic-native/status-bar'; i...
ionic2 （一） Modals 组件踩坑
小石猴的博客
06-30 1044
ionic2 （一） Modals 组件踩坑 最近在使用ionic2做项目其中用到了Modals组件，开发过程中发现文档不够详细踩了不少坑，在这里跟大家分享一下希望可以帮到大家 Modals组件的基本用法 官方文档：http://ionicframework.com/docs/v2/components/#modals 中文文档： https://yanxiaodi.g...
ionic学习笔记
总结，交流，记录，成长
08-31 618
目录权限问题,退出到上一个目录,执行 sudo chmod -R 777 目录名 快速生成页面或者模块 ionic g page 注意generator可简写为g 全局的样式定义好记得导入 组件的样式单独写组件样式文件 注意全局样式对组件样式的影响 showWhen=’ios’ 决定在什么设备显示 定义公共baseUI实现代码复用 页面可继承自baseUI,可调用公司ui中的方法 ionVi...
ionic侧边栏 ion-side-menus 以及 ion-tap结合侧边 栏详解
最新发布
05-30
ion-side-menus是Ionic中用于创建侧边栏的指令，它提供了多个选项来控制侧边栏的外观和功能。 要使用ion-side-menus指令，需要在HTML中创建一个包含ion-side-menus指令的容器元素。然后，在容器中定义一个ion-side-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值