6

我想知道如何使用 Om 或 Reagent 实现模式对话框的显示和隐藏。由于我的 UI 是状态上的函数，因此显示/隐藏应该由该状态下的属性触发。

但是像 Bootstrap 这样的框架需要调用一些 JavaScript 来显示/隐藏对话框。

这个问题有什么通用的解决方案吗？

4

3 回答 3

8

不要使用 javascript 或 jquery 效果来显示/隐藏 Om 或 Reagent 中的对话框。相反，让atom的值决定是否显示模态对话框。以下是试剂的示例：

[(fn [shown]
       (if shown
        [:div.jumbotron.modal-background 
          {:on-click #(reset! popup-shown false)} 
          [:div.alert.alert-info
            [:div "Hello!"]]]
        [:div]))
   @popup-shown]
于 2016-03-01T20:00:52.323 回答
4

看看re-com。它当然显示了一种方法。 https://github.com/Day8/re-com

于 2016-03-05T08:35:52.377 回答
0

特别是对于 Bootstrap，JavaScript 将“显示”添加到模态的类和style="display: block;"模态中。通过将这些添加到模式中，我们可以强制它一直显示，然后我们可以使用条件渲染来隐藏它：

(defn my-modal []
    (let [show @(app-state/query :modal-showing)]
      (when show
          [:div.modal.show {:tabIndex -1
                            :style {:display "block"}}
            [:div.modal-dialog
              [:div.modal-content
                "etc"]]])))

你从哪里得到你的 show boolean 以及它是如何更新的将是特定于应用程序的，但希望这足以证明这个想法。

于 2020-10-26T19:00:46.840 回答