ionic-framework 相关问题

ionic cordova android 构建失败（命令失败，退出代码 1：gradle）

我正在尝试通过 ionic cordova 构建 android 14（api 级别 34）。这是离子信息的错误。我对此一无所知。 离子信息 离子： 离子 CLI：7.2.0（/usr/local/lib/

如何使离子文本区域填充其父容器？

我不知道如何使离子文本区域扩展以填充其父级！ 我不知道如何使 ion-textarea 扩展以填充其父级！ <ion-textarea labelPlacement="floating" [placeholder]="placeholder" counter="true" [maxlength]="maxLength" > <!-- Label--> <div class="label" slot="label"> {{ label }} @if (true) { <ion-text>*</ion-text> } </div> </ion-textarea> 和scss代码： :host { // display: block; /* Ensure the component respects parent layout */ // height: 100%; display: flex; /* Use flexbox to handle layout */ flex-direction: column; width: 100%; height: 100%; /* Ensure the parent container has a height */ } /** Main Styles */ .monkey-text-area, .label-textarea-wrapper, label, .ion-textarea-fill { flex: 1; /* Allow the textarea to grow and fill the parent */ --min-height: 100%; /* Set minimum height to fill parent */ --max-height: 100%; /* Ensure it doesn't exceed parent's height */ --padding-top: 0; --padding-bottom: 0; // display: flex; // flex: 1; // --min-height: 0; // --max-height: 100%; // height: 100%; // width: 100%; // --min-height: 100%; // --max-height: 100%; // ion-textarea { // height: 100%; // width: 100%; // --height: 100%; // --width: 100%; --background: transparent; // } } 对不起，我的霰弹枪。但没有什么会对身高产生盲目的影响。唯一有影响的是 rows 属性。这似乎让我有点失望？除非我错过了什么。 添加 height 的 css 属性即可。但为此，您可以像文档中所述那样使用 row ，并使用另一个名为 autogrow 的属性来相应地缩放区域。

不可能为 Android 构建 Ionic

我正在尝试为 Android 编译一个 ionic 应用程序，但出现错误： $ ionic cordova 构建 android ................................................ /home/matte/Desktop/Cimoda/platforms/android/src/com/synconset/

Ionic 7.8：如何将自定义格式应用于离子输入

如果想要的结果是这样的： 我试图在 Ionic 中实现这一目标，却陷入了死胡同。显然，这是 vanilla css 中非常直接的格式化任务。但要迫使离子成分...

输入、图标、项目的离子样式问题

将样式应用于 Ionic 元素似乎不遵守文档，或遵循一致的方法。这是模板部分： ...

ionic Angular 8 获取组件实例

在使用离子和角度创建模态后，我尝试了不同的方法来获取组件实例，但是对我来说没有任何效果。你能帮我理解一下，我怎样才能得到一个组件...

ionic 在模态中添加框阴影不起作用

我正在尝试为模型弹出窗口添加阴影以赋予其一定的尺寸。但这并不适用。这是代码 const modal = 等待 this.modalCtl.create({ 组件：ExplainNetworthCompone...

NX 20.2.2 + Angular 19 + Ionic 8 + Jest：最新更新后的测试失败

我一直在 NX monorepo（没有 nxtend/nxext）中维护 Ionic-Angular 应用程序一段时间，到目前为止进展顺利。 然而，最后一次迁移到 NX 20.2.2 + Angular 19 已经

onAuthStateChanged 在 iOS 上不返回初始 null 值

我正在将 Ionic/Angular 应用程序从使用 Firebase 和 Angular/Fire 命名空间兼容库的组合迁移到 Angular/Fire 模块化库。 更新后的代码，使用@angular/fire mod...

如何给ionic div添加波纹效果？

我找到了这个 但是，这只是元素波纹，而不是点击周围的波纹（具有特定半径）

离子控制控制器模态高度

我正在使用像这样启动的控制器弹出窗口 异步 openNwInsights(){ const modal = 等待 this.modalCtl.create({ 组件：ExplainNetworthComponent }) 模态.present(); ...

如何在 Chrome 的 Inspect Devices 中获取 Android 的 NullInjectorError 信息

我有一个 Ionic Angular 项目，它在浏览器中运行良好，但在 Android 设备上给出 NullInjectorError 。 为了追查错误来自哪里，我有一个Android设备

某些样式不适用于 Ionic 离子按钮

问题的超级简单示例： 离子 7.8。 {{ 文本 }} 问题的超级简单示例： 离子7.8。 <ion-button [ngClass]="classes" [disabled]="disabled" (click)="onClick()"> {{ text }} <ion-icon *ngIf="iconName" slot="end" src="svg/{{iconName}}.svg"></ion-icon> </ion-button> 款式： ion-button { // Rounded Corners --border-radius: var(--button-radius); --border-width: 1 px; // Defaults display: inline-flex; // Make sure button doesn't take full width by default align-items: center; justify-content: center; text-transform: none !important; // Disable uppercase globally for ion-buttons (need to force it!) padding: 0; // Ionic adds 5px padding top & bottom margin: 0; // remove outer margin (beyond the border-box) box-sizing: border-box !important; --box-shadow: 0; // Wanda no likey the shadows! // All except for links use this font @extend .text-button-label; // from typography global styles &.monkey-theme-secondary { --color: var(--text-lines, #00272E); --background: transparent; --border-style: solid; --border-color: var(--text-lines, #00272E); --border-width: 2 px; } ... 为了快速测试，我使用 Storybook。问题就在这里。边框宽度始终为 3 px。其他一切都很好。其他 CSS 变量似乎表现良好 - 它只是边框宽度。 我并不追求一种古怪的解决方法。我真正想要的是理解为什么会出现这种情况。也许可以更好地理解模板的工作原理... 这是故事书与预期结果的比较视图。高于实际。低于预期。 在CSS中，数字和单位不能用空格分隔。 CSS 使用空格作为分隔符，因此浏览器认为它们是单独的值。 所以这是无效的语法并且不会执行任何操作： border-width: 2 px; 删除空格，它应该可以工作： border-width: 2px; 在正常的 CSS 声明（不是自定义属性）中，浏览器开发工具会通过显示该值无效来帮助您。但是对于自定义属性，浏览器不知道自定义属性应该是什么类型（即它可能是值列表）。

电容生物识别骚扰电话

我们有 CapacitorJS 6.0.0 Angular 18.2.2 应用程序，它使用电容器本机生物识别 4.2.2。 在新版本发布期间，Android 版本很好，但 Testflight/iOS 版本因为此版本调用

运行 Gradle Build - 失败当我尝试运行离子电容器时运行 android -l --external

所以在我刚刚更换设备之前，当我尝试运行实时重新加载时，我的离子项目工作得很好。我想我已经安装了与我的旧设备相同版本的jdk和node js。 现在，我...

如何将 Adobe Animate CC 生成的 HTML5 动画添加到 Ionic 2 项目页面？

我使用 Adobe Animate CC 作为 HTML 5 画布项目制作了一个动画。我可以通过多种方式发布动画： 作为html：1个html文件，1个js文件，几个包含文件的目录。页面是...

如何在ionic6 vue中使用嵌套的ion-router-outlet？

我有以下路由器设置： { 名称：“设置”， 路径：“/设置”， 组件：() => import("@/views/SettingsPage.vue"), 孩子们： [ { 路径：'个人资料'， ...

Ionic - 更改/删除默认（cordova）启动徽标

我正在使用 Ionic 框架构建一个混合应用程序。 我在更改 Android 上的默认应用程序图标和“启动屏幕”时遇到问题。我已将自定义 icon.png 和splash.png 添加到/resources。之后...

Ionic 拒绝在框架中显示“https://withpersona.com/”，因为它将“X-Frame-Options”设置为“拒绝”

最近我一直在使用 Persona KYC 实施我的 Ionic 应用程序。但我仍然遇到集成问题。当我在 Ionic 中执行 javascript 代码时，出现标题中提到的错误....

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

我正在使用ionic 4 fab按钮，在fab按钮中我想设置动态背景颜色。 这里的示例代码： 页面.html 我使用的是ionic 4 fab按钮，在fab按钮中我想设置动态背景颜色。 这里是示例代码： page.html <!-- fab placed to the bottom end --> <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>