- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
Material 设计对话框 guidelines不解决平板电脑或桌面大小视口(viewport)上的对话框宽度。我在某处读到应该使用 56px 的增量,但不知道这是否是共识。
我的对话框需要的 HTML 输入对于默认大小的对话框来说太小了。它看起来很粗糙,我不想将我的输入宽度拉得太长而无法填满对话框。
关于调整对话框大小的一些基本 CSS 有什么建议吗?也许是 sm、md、lg 类型的解决方案?我应该使用 56px 的增量还是?...提前致谢。
最佳答案
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/
我目前正在使用“手动实例化”方法,效果很好。 我注意到“自动实例化”方法,但无法使其工作。 使用这种方法到底需要什么? 当我使用代码时: mdc.tabs.MDCTabBar.attachTo(doc
请问有关使用 Java 的 MDC 的小问题。 起初,我有非常简单的方法,一些方法有很多参数(为了这个问题我缩短了参数列表以保持简短,但请想象很多参数) public String invokeMe
我正在尝试使用 mdc 网络组件实现自动完成输入。我有一个菜单选择事件监听器,我想在其中停用文本字段上的焦点。我已经尝试使用 MDCTextFieldFoundation deactivateFocu
在我的 Head 标签中包含以下内容 :root { --mdc-theme-primary: #64ba69; --mdc-theme--primary-light: #96ed98; --mdc
我正在尝试在 lit 元素中使用 mdc-component(比如 mdc-textfield)。看起来我必须将 css 和 js 文件都导入到元素中。 我不确定如何将 css 导入到 lit-ele
我使用 MDC-Web 组件。我以编程方式打开和关闭对话框,但有时它不会关闭。我不知道我是否以正确的方式关闭对话框。 closeDialog('dialog_gui'); function close
所以,我正在使用 AngularCLI 和 Angular-MDC,我想使用 styles.scss 的第二种颜色。现场有https://trimox.github.io/angular-mdc-we
到目前为止,MDC Web Components 的表现不错,但我在这里停滞的时间太长了。 (JS不强) mdc-select 以前是非原生的,然后是原生的 HTML select,现在又是非原生的。
我知道MDC是由Log4j提供的,用于将相关日志消息分组在一起,以便于调试。 但是,MDC 只能用于此目的吗?如果我使用 MDC 在执行线程中保存小型业务信息,这是否被认为是一种不好的做法? ? 最佳
我希望每个应用程序都有一个单独的日志文件,同时只使用一个 logback.xml 文件。因此我使用的是 SiftingAppender . 每个应用程序都有自己的 WebApplicationInit
Material 设计对话框 guidelines不解决平板电脑或桌面大小视口(viewport)上的对话框宽度。我在某处读到应该使用 56px 的增量,但不知道这是否是共识。 我的对话框需要的 HT
在尝试实现网格布局时,当我提供特定于设备的单元格跨度值时,例如“mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-6-de
目录 1. 为什么需要这个traceId 2.通过MDC设置traceId 2.1 使用filter过滤器设置traceId 2.2
我们使用 SLF4J(使用 log4j)作为我们的日志框架。我们正在尝试利用 Log4j 支持的在线文档的 MDC 功能。 使用 SLF4J 时 MDC 不起作用。但是,当使用 log4j 时,它工作
如何在不使用 SASS mixins 的情况下更改 MDC 按钮的容器颜色,如 here 所述.指定的实际等效 CSS 是什么? 我尝试了以下方法: .mdc-button:after, .mdc-b
import React, { Component } from "react"; import { MDCTextfield, MDCTextfieldFoundation } from "@mat
我们正在使用 MDC 菜单组件。我正在寻找一种在单击菜单中的第一项时不关闭菜单的方法。 我尝试将一个类应用到 mdc-list-item 并将光标指定为自动,但它不起作用。 .menu-do-not-
我为此搜索了谷歌,查看了多项建议,但似乎无济于事。 我有一个使用 MDC 的 JAX-RS 应用程序,当一个端点被命中时设置一个 transactionId 以使调试更容易。但是,当我停止或重新启动
我必须接管一个包含多个层、服务和组件的巨型整体。 当我浏览代码时,我首先意识到的是 MDC 的使用. 一些例子: public void setContextOrderId(String orderI
我正在尝试记录在我的 JSF 应用程序中发起每个请求的用户名,但显然 MDC on a web app server (thread pool) is risky . 在使用 EJB @Asynchr
我是一名优秀的程序员,十分优秀!