MDC-Web对话框宽度

Question

Material 设计对话框 guidelines 不解决平板电脑或桌面大小视口上的对话框宽度问题。我在某处读到应该使用 56px 的增量，但不知道这是否是共识。

我在对话框中需要的 HTML 输入对于默认大小的对话框来说太小了。它看起来很粗糙，我不想将我的输入宽度拉得太长以填充对话框。

关于调整对话框大小的一些基本 CSS 有什么建议吗？也许是 sm、md、lg 类型的解决方案？我应该使用 56px 的增量还是？...提前致谢。

Answer 1

Material Design Dialog guidelines do not address dialog width on tablet or desktop sized viewports.

这是真的，规范没有描述桌面的对话框宽度，所以每个团队都自己实现。 Material Design Lite 团队使用固定宽度，如下例所示，

(function() {
    'use strict';
    var dialogButton = document.querySelector('.dialog-button');
    var dialog = document.querySelector('#dialog');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    dialogButton.addEventListener('click', function() {
       dialog.showModal();
    });
    dialog.querySelector('button:not([disabled])')
    .addEventListener('click', function() {
      dialog.close();
    });
  }());

body {
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}

.mdl-dialog {
  border: none;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  width: 280px; }
  .mdl-dialog__title {
    padding: 24px 24px 0;
    margin: 0;
    font-size: 2.5rem; }
  .mdl-dialog__actions {
    padding: 8px 8px 8px 24px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
    .mdl-dialog__actions > * {
      margin-right: 8px;
      height: 36px; }
      .mdl-dialog__actions > *:first-child {
        margin-right: 0; }
    .mdl-dialog__actions--full-width {
      padding: 0 0 8px 0; }
      .mdl-dialog__actions--full-width > * {
        height: 48px;
        -webkit-flex: 0 0 100%;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        padding-right: 16px;
        margin-right: 0;
        text-align: right; }
  .mdl-dialog__content {
    padding: 20px 24px 24px 24px;
    color: rgba(0,0,0, 0.54); }

<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<button class="mdl-button mdl-button--raised mdl-js-button dialog-button">Show Dialog</button>

<p>
  Remember that the Dialog component requires the <a href="https://github.com/GoogleChrome/dialog-polyfill">Dialog polyfill</a> in order to function.
  It takes advantage of the native dialog element to provide the most robust experience possible.
</p>

<dialog id="dialog" class="mdl-dialog">
  <h3 class="mdl-dialog__title">MDL Dialog</h3>
  <div class="mdl-dialog__content">
    <p>
      This is an example of the Material Design Lite dialog component.
      Please use responsibly.
    </p>
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button">Close</button>
    <button type="button" class="mdl-button" disabled>Disabled action</button>
  </div>
</dialog>

而 MDL 团队的 MDC-Web team uses a min-width of 640px and a max-width of 865px. Here is a discussion 讨论了这个问题。

The HTML inputs I require on my dialog are simply too small for the default sized dialog. It just looks unrefined and I don't want to stretch my input widths too far either to fill the dialog.

因此，总而言之，您可以简单地实施最适合您的方法。您可以每行使用一个全角输入：

(function() {
    'use strict';
    var dialogButton = document.querySelector('.dialog-button');
    var dialog = document.querySelector('#dialog');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    dialogButton.addEventListener('click', function() {
       dialog.showModal();
    });
    dialog.querySelector('button:not([disabled])')
    .addEventListener('click', function() {
      dialog.close();
    });
  }());

body {
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}

.mdl-dialog {
  border: none;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14),
    0 11px 15px -7px rgba(0, 0, 0, 0.12),
    0 24px 38px 3px rgba(0, 0, 0, 0.2);
  width: 280px;
}
.mdl-dialog__title {
  padding: 24px 24px 0;
  margin: 0;
  font-size: 2.5rem;
}
.mdl-dialog__actions {
  padding: 8px 8px 8px 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.mdl-dialog__actions > * {
  margin-right: 8px;
  height: 36px;
}
.mdl-dialog__actions > *:first-child {
  margin-right: 0;
}
.mdl-dialog__actions--full-width {
  padding: 0 0 8px 0;
}
.mdl-dialog__actions--full-width > * {
  height: 48px;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  padding-right: 16px;
  margin-right: 0;
  text-align: right;
}
.mdl-dialog__content {
  padding: 20px 24px 24px 24px;
  color: rgba(0, 0, 0, 0.54);
}

/**/

.mdl-dialog {
  width: fit-content;
}

.mdl-dialog__content .mdl-textfield {
  width: 100%;
  margin-right: 24px;
}

<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<button class="mdl-button mdl-button--raised mdl-js-button dialog-button">Show Dialog</button>

<p>
  Remember that the Dialog component requires the <a href="https://github.com/GoogleChrome/dialog-polyfill">Dialog polyfill</a> in order to function. It takes advantage of the native dialog element to provide the most robust experience possible.
</p>

<dialog id="dialog" class="mdl-dialog">
  <h3 class="mdl-dialog__title">MDL Dialog</h3>
  <div class="mdl-dialog__content">
    <form action="#">
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="sample3">
        <label class="mdl-textfield__label" for="sample3">Text...</label>
      </div>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="sample3">
        <label class="mdl-textfield__label" for="sample3">Text...</label>
      </div>
    </form>
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button">Close</button>
    <button type="button" class="mdl-button" disabled>Disabled action</button>
  </div>
</dialog>

或者您可以每行使用多个输入来填充更多 space:

(function() {
  'use strict';
  var dialogButton = document.querySelector('.dialog-button');
  var dialog = document.querySelector('#dialog');
  if (!dialog.showModal) {
    dialogPolyfill.registerDialog(dialog);
  }
  dialogButton.addEventListener('click', function() {
    dialog.showModal();
  });
  dialog.querySelector('button:not([disabled])')
    .addEventListener('click', function() {
      dialog.close();
    });
}());

body {
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}

.mdl-dialog {
  border: none;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  width: 280px;
}

.mdl-dialog__title {
  padding: 24px 24px 0;
  margin: 0;
  font-size: 2.5rem;
}

.mdl-dialog__actions {
  padding: 8px 8px 8px 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.mdl-dialog__actions>* {
  margin-right: 8px;
  height: 36px;
}

.mdl-dialog__actions>*:first-child {
  margin-right: 0;
}

.mdl-dialog__actions--full-width {
  padding: 0 0 8px 0;
}

.mdl-dialog__actions--full-width>* {
  height: 48px;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  padding-right: 16px;
  margin-right: 0;
  text-align: right;
}

.mdl-dialog__content {
  padding: 20px 24px 24px 24px;
  color: rgba(0, 0, 0, 0.54);
}


/**/

.mdl-dialog {
  width: fit-content;
  min-width: 600px;
}

.mdl-dialog__content .mdl-textfield {
  width: 45%;
  margin-right: 24px;
}

<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<button class="mdl-button mdl-button--raised mdl-js-button dialog-button">Show Dialog</button>

<p>
  Remember that the Dialog component requires the <a href="https://github.com/GoogleChrome/dialog-polyfill">Dialog polyfill</a> in order to function. It takes advantage of the native dialog element to provide the most robust experience possible.
</p>

<dialog id="dialog" class="mdl-dialog">
  <h3 class="mdl-dialog__title">MDL Dialog</h3>
  <div class="mdl-dialog__content">
    <form action="#">
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="sample3">
        <label class="mdl-textfield__label" for="sample3">Text...</label>
      </div>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="sample3">
        <label class="mdl-textfield__label" for="sample3">Text...</label>
      </div>
    </form>
  </div>
  <div class="mdl-dialog__actions">
    <button type="button" class="mdl-button">Close</button>
    <button type="button" class="mdl-button" disabled>Disabled action</button>
  </div>
</dialog>

MDC-Web对话框宽度

MDC-Web Dialog Width

html

css

material-design

material-design-lite