html - MDC-Web对话框宽度

标签 html css material-design material-design-lite

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

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

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

enter image description here

最佳答案

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>

而 MDC-Web团队使用 640px 的 min-width 和 865px 的 max-width。 Here is a discussion MDL 团队的成员，他们在那里讨论这个问题。

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.

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

(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>

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

(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>

关于html - MDC-Web对话框宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46257470/

上一篇：css - 使用 Bootstrap v4 的相同高度图像

下一篇：html - 动画后需要删除CSS文本

相关文章：

android - 有什么方法可以在 API < 21 (5.0 Lollipop) 中制作 Material 风格的阴影吗？

Android:垂直展开的 float 操作按钮

php - WordPress 内容不显示

html - <head> 标签是不是默认不显示的常规标签

javascript - 计算平均值并在两个文本框中显示不同的结果

html - 使文本完全出现在 div 中

javascript - 淡出当前元素 淡入下一个元素并反向

jquery - 在位置固定元素的顶部滚动不会滚动容器

php - 仅限桌面版的 Wordpress 特色图片

android - 如何更改工具栏导航和溢出菜单图标(appcompat v7)？

©2024 IT工具网  联系我们