ionic4 相关问题

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

我正在使用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 时不触发复选框？

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