清晰度全屏模式

Question

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

任何人都知道如何制作全屏清晰模式？

Answer 1

Clarity模式用于警告用户，确认对话框和面向任务的工作流程。通常，这些是需要用户关注和注意的任务，但我们不希望将它们完全排除在模态叠加层后面的上下文之外。它们不是为全屏使用而设计的。

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

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

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

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

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