Question

我使用Angular Material创建了对话框，但到目前为止还没有找到使用Material Design Lite创建对话框的方法。它有解决方法吗？

Answer 1

MDL支持HTML5对话框的样式，但不包含任何polyfill。所以你必须有一个支持它们的浏览器（如Chromium）。否则使用@ manuel-84

指出的https://github.com/GoogleChrome/dialog-polyfill之类的polyfill

<dialog id="dialog" class="mdl-dialog">
    <h4 class="mdl-dialog__title">Hello User</h4>
    <div class="mdl-dialog__content">
      <p>Hello world from dialog!<p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button close">Disagree</button>
    </div>
</dialog>

使用某个按钮调用

document.getElementById('dialog').showModal();

请参阅Material Design Lite Components : Dialogs

Answer 2

我只是MDL的用户，而不是内部人员。但是，据我所知，Dialog支持不存在，但它正在进行中。标记为V1.1，但不知道该计划可能是什么。

https://github.com/google/material-design-lite/pull/1762

Answer 3

本身不是一个对话框，但我在一个项目中所做的就是让一个表单向下滑动，使用jQuery你会获得一些不错的动画

基本上定义卡片中的表格，将高度设置为零，不透明度设置为0.然后执行以下脚本以显示对话框

           $('#objects_card_holder').animate({
                    height: 400
                },500,function(){

                    $('#objects_card_holder').animate({
                        opacity: 1
                    },100,function(){
                        $('#projectName').val('');
                    });
            });

然后当不需要表单时，运行另一个脚本来隐藏它。

        $('#objects_card_holder').animate({
            opacity:0
        },
        100,
        function(){
            $('#objects_card_holder').animate({
                height:0
            },
            500,
            function(){
            });
        });

假设您的卡上有id objects_card_holder

当然，如果你真的需要一个对话框，jQuery有它自己的对话框。见https://jqueryui.com/dialog/

有没有办法在材料设计精简版中创建对话框？

3 个答案: