ionic4 相关问题

Ionic 4是Ionic的新版本，Ionic是一个开源SDK，使开发人员能够使用熟悉的Web技术（HTML，CSS和JavaScript）构建高性能的高质量移动应用程序。 Ionic 4与Angular搭配使用。

我的侧面菜单标题中有一个离子列表，但我无法减少项目的间距。你可以在图片中看到我试图减少的地方：列表代码是：我的侧面菜单标题中有一个离子列表，但我无法减少项目的间距。你可以在图片中看到我试图减少的地方：列表代码为： <ion-list class="sidemenu-header-list" inset=true lines="none"> <ion-item color="secondary"> <h2>{{name}}</h2> </ion-item> <ion-item color="secondary" class="ion-no-padding" *ngIf="school"> <ion-label style="font-size: 14px" text-wrap innerHTML={{school}}></ion-label> <ion-icon size="small" name="school" slot="start"></ion-icon> </ion-item> <ion-item color="secondary" class="ion-no-padding"*ngIf="year"> <ion-label style="font-size: 14px" >{{year | translate}}</ion-label> <ion-icon size="small" name="calendar" slot="start"></ion-icon> </ion-item> </ion-list> 我可以看到输入包装器上设置的大小为 48px；这就是强制我的物品高度的原因；但看不到在哪里可以修改它。尝试将以下行放入组件 scss 文件中以修改 ion-item 组件的 min-height CSS 变量 ion-item { --min-height: 16px; } h2 { padding: 0px; margin : 0px; } 在 CSS 中 ion-item { --min-height: 16px; } h2 { padding: 0px; margin : 0px; } 在 HTML 中 <ion-item class="ion-no-padding"> // Ionic 4 or 5 我有一个像这样的IonItem： <ion-item> <ion-badge slot="start">{{ fileCitation[0] }}</ion-badge> <ion-label>{{ fileCitation[1].fileName }}</ion-label> </ion-item> 它看起来像这样：为了降低 IonItem 的高度，我在 style="--min-height: 20px" 上设置 <ion-item>，并将 ion-no-margin 类添加到 <ion-label>： <ion-item style="--min-height: 20px"> <ion-badge slot="start">{{ fileCitation[0] }}</ion-badge> <ion-label class="ion-no-margin">{{ fileCitation[1].fileName }}</ion-label> </ion-item> 结果：选择适合您的内容的高度 --min-height :)

ionic4

回答 3 投票 0

ionic、firebase：如何从 firebase 身份验证获取所有用户电子邮件

我正在尝试获取我的 firebase 身份验证存储中的所有用户的用户电子邮件，我需要此信息，以便我可以允许用户在系统内相互发送消息。我不是很

javascript firebase ionic-framework firebase-authentication ionic4

回答 2 投票 0

如何将 IONIC 版本中的 Angular 版本从 8 更新到最新版本

我尝试使用以下命令，但安装最新版本后，路由不起作用，说找不到模块。请让我知道如何正确更新 ng 更新@angular/core @

angular ionic-framework ionic4 ionic5

回答 1 投票 0

错误：wasm 的异步和同步获取均失败

我正在 IONIC4 中开发混合应用程序。使用 typeorm 作为数据库。出现错误 core.js:9110 ERROR 错误：未捕获（承诺中）：abort("abort(\"wasm fa 的异步和同步获取...

angular ionic4 hybrid-mobile-app typeorm sql.js

回答 2 投票 0

如何从ionic4的内部存储加载ePub？

我必须从ionic4的内部存储设备加载epub。当我从资产加载 epub 时，它会正确加载，但是当我从内部存储设备加载 epub 时，无法无错误地加载。这个。

typescript cordova ionic4 hybrid-mobile-app epub.js

回答 1 投票 0

如何使用ionic-v4在ion-fab-button中添加动态背景颜色？

我正在使用ionic 4 fab按钮，在fab按钮中我想设置动态背景颜色。这里的示例代码：页面.html 我使用的是ionic 4 fab按钮，在fab按钮中我想设置动态背景颜色。这里是示例代码： page.html  <ion-fab vertical="bottom" horizontal="end" slot="fixed"> <ion-fab-button [style.background.color]="currentColor" [style.color]="isColorLight(currentColor) ? 'black' : 'white'" size="small"> <ion-icon name="color-palette"></ion-icon> </ion-fab-button> <ion-fab-list side="top"> <ion-fab-button (click)="switchColor(i)" [style.background.color]="colors[i]" *ngFor="let color of colors; let i = index"> </ion-fab-button> </ion-fab-list> </ion-fab> 页面.ts colors: string[] = ['#000000', '#db0f0f', '#0fbf0f', '#35a3e8', '#FFFFFF']; currentColor: string = this.colors[0]; :: :: switchColor(index: number) { this.currentColor = this.colors[index]; } 另外，我尝试了[style.background-color]="currentColor"，但它不起作用。 @Najam Us Saqib 答案的输出：的颜色由其 --ion-color-base 属性控制。因此，请尝试将 --ion-color-base 与 !important 属性一起使用来覆盖已定义的 CSS 属性。但是，当我尝试使用 [ngstyle] 时，它不起作用，为了让它工作，我必须通过 CSS 文件分配它。我添加了一个示例供您参考。 HTML 模板， <ion-fab-button color="light" id="btnProceed"></ion-fab-button> CSS 块 #btnProceed { --ion-color-base: #006161 !重要; } 希望这会有所帮助。使用 [ngStyle] 属性。 <ion-fab vertical="bottom" horizontal="start" slot="fixed"> <ion-fab-button [ngStyle]="{'background': currentColor}" [style.color]="isColorLight(currentColor) ? 'black' : 'white'" size="small"> <ion-icon name="color-palette"></ion-icon> </ion-fab-button> <ion-fab-list side="top"> <ion-fab-button (click)="switchColor(i)" [ngStyle]="{'background': currentColor}" *ngFor="let color of colors; let i = index"> </ion-fab-button> </ion-fab-list> </ion-fab> 你可以尝试“背景”而不是“背景颜色”，如下所示： [样式.背景]="当前颜色" 万一有人看到这个，我也遇到了同样的问题，并成功地通过添加 [style] 属性和离子定义的属性 --background 来动态更改颜色： <ion-fab-button [style.--background]="config.yourColor"> </ion-fab-button> 这里我们需要更改 Shadow DOM 的背景颜色，这操作起来很棘手。为此，Ionic 使用 CSS 属性设计了这个影子 DOM，可以轻松更改在 CSS 中 ion-fab-button { --background: #7c3aed } JS（动态） <IonFabButton style={{ '--background': yourColor }} />; 使用ionic 7，你可以尝试使用--background属性的ngStyle <ion-fab-button [ngStyle]="{'--background': option.colorFabButton}"> <ion-icon class="zoom-icon-option" [src]="option.icon"></ion-icon> </ion-fab-button>

ionic-framework colors ionic4

回答 6 投票 0

Ionic4 组件 - 菜单：必须有一个“内容”元素来监听拖动事件

我有以下代码：我有以下代码： <!doctype html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Ionic 4 - Menu</title> <link rel="stylesheet" href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css" /> <script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script> <script> window.addEventListener('load', event => { document.querySelector('.button_details').addEventListener('click', (event) => { document.querySelector('.menu_main').toggle(); }); }); </script> </head> <body> <ion-menu class="menu_main" side="start"> <ion-header> <ion-toolbar color="secondary"> <ion-title>Left Menu</ion-title> </ion-toolbar> </ion-header> <ion-content padding> Hello World! </ion-content> </ion-menu> <ion-menu-controller></ion-menu-controller> <ion-card style="display:inline-block;width:300px"> <ion-card-header> <ion-card-title>Hello World</ion-card-title> </ion-card-header> <div style="padding:10px 10px;text-align:right;"> <ion-button color="primary" class="button_details">Details</ion-button> </div> </ion-card> </body> </html> 它工作正常，但有一个例外：当页面加载时，控制台上出现以下错误： Error: "Menu: must have a 'content' element to listen for drag events on." 这里有CodePen.io： https://codepen.io/anon/pen/qJgEzZ/?editors=1011 您可以在下面尝试代码StackOverflow： window.addEventListener('load', event => { document.querySelector('.button_details').addEventListener('click', (event) => { document.querySelector('.menu_main').toggle(); }); }); <script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script> <link href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css" rel="stylesheet"/> <ion-menu class="menu_main" side="start"> <ion-header> <ion-toolbar color="secondary"> <ion-title>Left Menu</ion-title> </ion-toolbar> </ion-header> <ion-content padding> Hello World! </ion-content> </ion-menu> <ion-menu-controller></ion-menu-controller> <ion-card style="display:inline-block;width:300px"> <ion-card-header> <ion-card-title>Hello World</ion-card-title> </ion-card-header> <div style="padding:10px 10px;text-align:right;"> <ion-button color="primary" class="button_details">Details</ion-button> </div> </ion-card> 知道如何解决这个问题吗？这里缺少什么？您可以用正确的代码来分叉我的CodePen.io吗？谢谢！ ion-menu需要contentId，ion-router-outlet需要id，所以菜单contentId必须是ion-router-outlet id: <ion-menu side="start" contentId="menuContent"> <ion-header> <ion-toolbar color="primary"> <ion-title>Start Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-item>Menu Item</ion-item> <ion-item>Menu Item</ion-item> <ion-item>Menu Item</ion-item> <ion-item>Menu Item</ion-item> <ion-item>Menu Item</ion-item> </ion-list> </ion-content> </ion-menu> <ion-router-outlet id="menuContent"></ion-router-outlet> 如果您想要代码：使用 content-id="content" 和离子含量 id="content"，其中 id 是调用菜单的主视图 ion-content 的标识符。 <ion-menu class="menu_main" side="start" content-id="content"> <ion-header> <ion-toolbar color="secondary"> <ion-title>Left Menu</ion-title> </ion-toolbar> </ion-header> <ion-content padding> Hello World! </ion-content> </ion-menu> <ion-menu-controller></ion-menu-controller> <ion-content id="content"> <ion-card style="display:inline-block;width:300px"> <ion-card-header> <ion-card-title>Hello World</ion-card-title> </ion-card-header> <div style="padding:10px 10px;text-align:right;"> <ion-button color="primary" class="button_details">Details</ion-button> </div> </ion-card> </ion-content> 对于未来的人，您可能会遇到这样的问题：离子分离窗格内有路由器插座，对吧？这样做： <ion-split-pane contentId="my-content"> <ion-menu contentId="my-content"> ... </ion-menu> <ion-router-outlet id="my-content"></ion-router-outlet> </ion-split-pane> 请注意，您的 ion-router-outlet 上的 [main] 属性现在已经消失了来源：https://github.com/ionic-team/ionic/issues/19618#issuecomment-540648915 如果您不需要滑动手势来打开菜单，您可以将 swipe-gesture="false" 属性添加到 ion-menu 标签。 IMO 这应该可以消除错误，但目前还没有。我在 GitHub 上创建了一个问题。 https://codepen.io/anon/pen/mzgRBj?editors=1011 如果您希望滑动手势正常工作，则必须使用 ion-menu 属性在 content-id 元素上引用内容元素的 ID，请参阅 https://codepen.io/anon/pen/BqEpxE?editors=1011 如果您使用 React 和 Ionic 6，Ionic 文档有点过时。我必须更改以下项目才能出现菜单：在 IonMenuButton 上设置 autoHide={false}；在 IonMenuButton 上设置 menu="start"（菜单属性的值必须等于 IonMenu side 属性）；改编后的代码菜单： <IonMenu side="start" contentId="main-content"> <IonHeader> <IonToolbar> <IonTitle>Hello</IonTitle> </IonToolbar> </IonHeader> <IonContent> <IonList> <IonItem>Hello</IonItem> </IonList> </IonContent> </IonMenu> <div id="main-content"> <IonHeader> <IonToolbar> <IonButtons slot="start"> <IonMenuButton autoHide={false} menu="start"></IonMenuButton> </IonButtons> </IonToolbar> </IonHeader> </div> </IonApp> 来自 ion-menu 文档的原始代码 -> https://github.com/ionic-team/ionic-docs/blob/00c0885346e0f048bb2c2bda104ea26cd9d1ff52/static/demos/api/menu/index.html 对于可能关心的人，这就是我所做的： <ion-split-pane contentId="main"> <ion-menu side="start" contentId="main"> <ion-header> <ion-toolbar color="primary"> <ion-title>Start Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-item>LogOut</ion-item> </ion-list> </ion-content> </ion-menu> <ion-router-outlet id="main"></ion-router-outlet> </ion-split-pane> 下面的解决方案对我来说是 Ionic 8 中的独立组件： // Ts Side import { IonMenu, IonHeader, IonTitle, IonToolbar, IonButton, IonContent, MenuController } from '@ionic/angular/standalone'; standalone: true, imports: [IonMenu, IonHeader, IonTitle, IonToolbar, IonButton, IonContent, MenuController] constructor(private menuController: MenuController) { } openDeclaration() { this.menuController.open('second-menu'); // Opens the side menu } // HTML SIDE <ion-button shape="round" (click)="openDeclaration()">Open Menu</ion-button> <ion-menu type="overlay" menuId="second-menu" contentId="content" id="content"> <ion-header> <ion-toolbar> <ion-title>Menu Content</ion-title> </ion-toolbar> </ion-header> <ion-content class="ion-padding ion-text-justify"> <p> I, hereby admit, while in my full legal competency that all the entered data and attached documents in this application are sound and accurate. Further, I shall advise Stackoverflow for Insurance within 10 days for any change that might take place on such data and documents or a fundamental change stated in this application. I also pledge to provide Stackoverflow with any information, data or documents that they might be requested later on with regard to this application. They shall have the right to verify and validate the soundness of this information, data or documents through official authorities. </p> </ion-content> </ion-menu>

javascript typescript ionic-framework ionic4 stenciljs

回答 7 投票 0

Ionic X 是什么？

我浏览了 Ionic 网站，我不明白 X 是什么意思？他们只是提到“开发人员会喜欢的低代码”。 https://ionicframework.com/x X 是否表示以下任意一个

ionic-framework ionic4 ionic-native

回答 2 投票 0

如何快速检查类的参数是否为null或''？

大家好，我正在尝试检查，例如在 Firebase 中的集合上创建文档之前，object.name、object.title、object.velocity...是否只是一个空格 ('') 或如果他们是...

ionic4

回答 2 投票 0

有没有办法在单击离子项 Ionic 4 时不触发复选框？

当我单击离子项目的标签时，会触发复选框。我想找到一种方法来防止这种情况发生，因为我想在单击标签时触发另一个功能。我找到了这个