如何为Angular/Ionic 7 Sheet Modal添加底部屏幕间隙？

官方Sheet Modal确实没有提供直接配置底部间隙的API，但不用急着提交功能请求，通过自定义CSS就能实现需求，具体步骤如下：

• 全局样式修改：在你的全局CSS文件中，针对Sheet Modal容器设置底部偏移，同时修正遮罩层范围：

/* 设置Sheet Modal与屏幕底部的间隙大小 */
ion-modal.sheet-modal {
  --bottom: 16px; /* 数值可根据需求调整 */
}

/* 让遮罩层铺满整个屏幕，避免底部出现未遮罩的空白区域 */
ion-modal.sheet-modal::part(backdrop) {
  bottom: 0 !important;
}

/* 保持Sheet顶部圆角样式，避免内容容器受间隙影响 */
ion-modal.sheet-modal ion-modal-content {
  border-radius: 16px 16px 0 0;
  margin-bottom: 0;
}

• 单个Modal自定义（推荐）：如果不想影响所有Sheet Modal，可以给目标Modal添加自定义类名（比如gap-bottom-sheet），再编写针对性样式：

ion-modal.gap-bottom-sheet {
  --bottom: 20px;
}

ion-modal.gap-bottom-sheet::part(backdrop) {
  bottom: 0 !important;
}

创建Modal时指定该类名：

const modal = await this.modalController.create({
  component: YourSheetComponent,
  cssClass: 'gap-bottom-sheet',
  presentationStyle: 'sheet'
});
await modal.present();

• 关键注意事项：
  • 使用::part()选择器是Ionic官方推荐的组件样式自定义方式，相比直接修改内部类名，能避免版本更新后样式失效的问题。
  • 调整--bottom变量时，必须同步修正遮罩层的bottom值，否则底部会露出未被遮罩的区域。

如果以上方案无法满足你的特殊需求（比如需要配合复杂交互逻辑），再考虑向Ionic官方仓库提交功能请求，描述清楚你的使用场景和预期效果即可。

内容的提问来源于stack exchange，提问作者Lorand