清晰全屏模式

Posted 2023-02-24

【中文标题】清晰全屏模式

【英文标题】：Clarity Full screen modal

【发布时间】：2018-06-01 07:54:13

【问题描述】：

我正在使用 VMware Clarity UI 框架，它很棒。 它有一些模态功能，但我正在寻找全屏模式。 清晰度带有某些尺寸，但不是全屏尺寸。

有人知道我如何制作清晰模式全屏吗？

【问题讨论】：

“全屏”100% 宽度和高度是什么意思？什么情况下需要？

【参考方案1】：

Clarity 模式旨在提醒用户、确认对话框和面向任务的工作流。通常，这些是需要用户集中注意力的任务，但我们不希望将它们完全脱离模态叠加层背后的上下文。它们不是为全屏使用而设计的。

我不建议使用对用户完全隐藏上下文的全屏模式。

也就是说，Clarity modals 可以被 CSS 覆盖。这是一个开始修改 Clarity 样式以制作全屏模式的示例。请记住，Clarity 模态​​不是为全屏设计的，并且可能还需要调整模态的某些元素以适应您的用例。

https://stackblitz.com/edit/clarity-dark-theme-v11-so-full-modal-css

fyi - 为了覆盖 Angular 组件的 css，您需要 ::ng-deep 覆盖需要调整的特定类。例如：

::ng-deep .modal-content-wrapper 
   height: 100%;
   width: 100%;