gpt4 book ai didi

html - MDC-Web对话框宽度

转载 作者:行者123 更新时间:2023-11-28 15:20:25 24 4
gpt4 key购买 nike

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团队使用 640pxmin-width865pxmax-widthHere 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com