aurelia - 将 aurelia-dialog 与 bootstrap、semantic 或其他 ui 工具包结合使用

Question

我使用的是semantic-ui，它内置了自己的模态功能( see here )。有没有办法 Hook aurelia-dialog 插件的渲染管道，以便我可以使用配置 aurelia-dialog 插件来使用语义 UI，而不是编写所有代码来利用 Aurelia 中的此特定功能？

Answer 1

是的，有。

Aurelia-dialog 提供了一个抽象渲染器接口(interface)，用于与渲染器交互。默认情况下，它将使用它提供的渲染器，但您可以通过配置对话框插件来覆盖它，如下所示:

import {MyRenderer} from './my-renderer';

aurelia.use.plugin('aurelia-dialog', (config) => {
    config.useRenderer(MyRenderer);
});

...其中 MyRenderer 使用 abstract Renderer interface 。在渲染器中，您需要实现三个方法:getDialogContainer、showDialog 和 hideDialog。

一些注意事项 - 在 showDialog 函数中，您需要创建 showDialog 和 hideDialog 方法并将它们附加到传递的dialogController作为一个论点。这确保您的dialogController 可以通过编程方式关闭对话框。

实现并注册渲染器后，对话框插件将使用您选择的 UI 工具包。希望这会有所帮助。