基于Material Design的开源，现代，响应式前端框架
我是CSS新手，尝试使用Materialize。我创建了包含 2 列的行。左列用于图像，右列用于文本。 这是我的 html 结构： 我是 css 新手，尝试使用 Materialize。我创建了包含 2 列的行。左栏用于图像，右栏用于文本。 这是我的html结构： <div class="section"> <div class="row"> <div class="col s12 m12 l8"> <img src="imgae_url_here.jpg" alt="" class="responsive-img"> </div> <div class="col s12 m12 l4 headline-right"> <p class="category">CHROMECAST</p> <h2 class="feat-article-title">Here’s to five years of Chromecast</h2> <p class="feat-article-summary">Lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet...</p> <a href="#!" class="btn grey lighten-4 grey-text text-darken-3 z-depth-1 waves-effect btn-headline">READ ARTICLE<i class="material-icons right">arrow_forward</i> </a> </div> </div> </div> 屏幕截图确实与行具有相同的宽度，如下所示。 如何使图像全宽与行相同？上面显示的屏幕截图中的黄线是我想要用该图像覆盖的内容。如何实现这一目标？谢谢！ <html> <head> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css"> </head> <style> </style> <body> <div class="row no-padding"> <div class="col s12 m12 l8" style="overflow:hidden"> <img src="https://placeimg.com/1080/480/any" style="margin-left:-12px"> </div> <div class="col s12 m12 l4 headline-right"> <p class="category">CHROMECAST</p> <h2 class="feat-article-title">Here’s to five years of Chromecast</h2> <p class="feat-article-summary">Lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet lorem ipsum doler sit amet...</p> <a href="#!" class="btn grey lighten-4 grey-text text-darken-3 z-depth-1 waves-effect btn-headline">READ ARTICLE<i class="material-icons right">arrow_forward</i> </a> </div> </body> </html> 这是您要求的答案。希望这会有所帮助:) 如果有任何问题或疑问，请回复我
我想要一个带有导航按钮栏的主页，每个按钮在我的代码中打开一个不同的页面，并有一个“返回”按钮返回主页。 我不知道如何制作页面
我有一个使用 React 和 Materialize-css 的单页 Web 应用程序，我想将其导出为静态 HTML 和 CSS，以便可以轻松编辑 HTML 以进行原型设计。 ...
如何从 Materialise Chips 获取数据或选定的标签到 Flask
我一直在尝试在 Materialise CSS 的 Chips 字段中选择标签，但没有成功，有人可以帮助我吗？ 完整的 HTML 模板： 我一直在尝试在 Materialise CSS 的 Chips 字段中选择标签，但没有成功，有人可以帮助我吗？ 完整 HTML 模板： <form action="{{ url_for('add') }}" method="POST"> {{ form.csrf_token }} <span>{{ form.pecas.label }}</span> <div class="chips" > </div> <input type="submit" class="btn btn-success" value="Save"> </form> <script> $(document).ready(function() { $('.chips').chips(); $('.chips-placeholder').chips({ placeholder: 'Código da peça', secondaryPlaceholder: '+ Peça', class: 'pecas', name: 'pecas', }); var chipInstance = M.Chips.getInstance($(".chips")); var pecas = chipInstance.chipsData console.log(pecas) }); </script> <script> $(document).ready(function(){ $('select').formSelect(); }); </script> Flask路线： @app.route("/add", methods=['POST', 'GET']) def add(): form = AddDispositivoForm(request.form) if request.method == 'POST': pecas = request.form.getlist("pecas") print(pecas) return redirect(url_for('index')) return render_template("add.html", form=form) 我尝试的一切都返回一个空列表[] 您可以使用如下所示的隐藏字段来携带芯片数据： <input type="hidden" name="pecas" id="pecasInput"> 然后你应该定义一个js函数来提取标签并使用标签的JSON字符串填充隐藏字段。 function updateHiddenInput() { var chipInstance = M.Chips.getInstance($('.chips')); $('#pecasInput').val(JSON.stringify(chipInstance.chipsData)); } 在此之后，确保此函数在提交表单时运行，一种方法是使用另一个函数，例如： $('#yourFormID').on('submit', function(e) { updateHiddenInput(); }); 然后在后端你可以通过以下方式获取值： if request.method == 'POST': pecas_json = request.form.get("pecas", "[]") pecas = json.loads(pecas_json) pecas 将有一个字典列表，其中标签作为键。
Materialize CSS - Select 在 DOM 中没有名称或正确的值
我无法理解 Materialize CSS 标签的工作原理。 在常规 HTML 选择标签中，您将插入一个 name="" 属性，并为每个选项插入一个 value="" 属性，这看起来...... 我无法理解 Materialize CSS <select> 标签的工作原理。 在常规 HTML 选择标签中，您将插入一个 name="" 属性，并为每个选项插入一个 value="" 属性，而物化 CSS 中似乎缺少该属性。 此代码： <div class="input-field col s12"> <select> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <label>Materialize Select</label> </div> 在 DOM 中渲染为： <div class="input-field col s12 m6"> <div class="select-wrapper"><span class="caret">▼</span> <input class="select-dropdown" readonly="true" data-activates="select-options-273ec07d-e7c4-e689-e2e3-6a57ff2f6293" value="Choose your option" type="text"> <ul style="width: 296px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-273ec07d-e7c4-e689-e2e3-6a57ff2f6293" class="dropdown-content select-dropdown"> <li class="disabled"><span>Choose your option</span></li><li class="active selected"><span>Option 1</span></li><li class=""><span>Option 2</span></li> <li class=""><span>Option 3</span></li> </ul> <select class="initialized"> <option value="" disabled="" selected="">Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> </div> <label>Materialize Select</label> </div> 我遇到的问题： 在哪里以及如何设置该选择元素的名称（在渲染的 input 元素中相应地表示）？ 这些值是列表中显示的文本。我希望具有与显示字符串不同的值，例如： <option value="1">regular style</option> <option value="2">bold style</option> <option value="3">italic style</option> 提前感谢大家:) Materialize 像大多数其他库一样处理 <select> 替换；遵循标准 HTML 约定，如 name="foo" 或 <option value="A">But I'm showing other text here</option>。 在创建更漂亮、实用的形式时，输出将考虑这些。 注意：Materialize CSS 文档确实显示了 <select> 标签，但没有大多数常见元素（如 name=""），但我认为这更多的是为了呈现最干净、最少的代码。 让我向您展示一个将名称添加到具体化 CSS 选择的示例 如果你的 html 表明了这一点 <div class="col s3"> <span class="required"></span> <select id="piezas" name="piezas" class="validate"> <option value="-1" disabled selected>Elija Pieza</option> <option value="1">Tornillo</option> <option value="2">Clavo</option> <option value="3">Cable</option> </select> </div> 您的选择将被转换并在 dom 中显示为类似这样的内容 <div class="col s3"> <span class="required"></span> <div class="select-wrapper valid"> <input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-9e9993fe-936f-86eb-22f5-ec638cf0121d" name="piezas-materialize" aria-invalid="false"> <ul id="select-options-9e9993fe-936f-86eb-22f5-ec638cf0121d" class="dropdown-content select-dropdown" tabindex="0"> <li class="disabled selected" id="select-options-9e9993fe-936f-86eb-22f5-ec638cf0121d0" tabindex="0"> <span>Elija Pieza</span> </li> <li id="select-options-9e9993fe-936f-86eb-22f5-ec638cf0121d1" tabindex="0"> <span>Tornillo</span> </li> <li id="select-options-9e9993fe-936f-86eb-22f5-ec638cf0121d2" tabindex="0"> <span>Clavo</span></li> <li id="select-options-9e9993fe-936f-86eb-22f5-ec638cf0121d3" tabindex="0"> <span>Cable</span> </li> </ul> <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path> </svg> <select id="piezas" name="piezas" class="validate ignore" tabindex="-1"> <option value="-1" disabled="" selected="">Elija Pieza</option> <option value="1">Tornillo</option> <option value="2">Clavo</option> <option value="3">Cable</option> </select> </div> </div> 要为此选择添加名称，请使用以下 JavaScript 代码迭代所有选择并添加自定义名称。 请记住，您需要在名称中添加后缀，以避免在许多选择中使用相同的名称 let allSelects = $('.select-dropdown.dropdown-trigger'); for (i = 0; i < allSelects .length; i++) { let item = $(allSelects[i]); let name= item.parent().children()[3].name; item.attr("name", name + '-materialize'); // change -materialize for the suffix you like }
尽管表格容器高度固定，但表格行仍占用额外空间（超出设定高度）
几天以来我一直在项目中调试这个问题。整个调试过程让我非常痛苦。您会看到该错误是独立的，因此您可能没有意识到它有多么困难
我有一个物化多重选择元素。但我似乎找不到一种方法来检索所选值。有谁知道如何检索所选值？ 这是当你...
我正在尝试使用 Google Apps 脚本创建一个简单的查找表单。该表单使用来自电子表格的数据来填充许多自动完成输入字段。 我不明白为什么
我正在按照我在堆栈溢出其他地方找到的指导在 django 中克隆我的空表单。 JS 将按预期附加一个新表单，但是选择小部件的下拉菜单并不...
我尝试了很多方法将 Materialise CSS 添加到 Rails 7 中。 我需要一些帮助才能将 Materialise 添加到 Rails 7 。 我尝试使用 --css=物化
我有一个新闻搜索按钮，如果我输入无法搜索的文本，应该会自动出现一个模式窗口，指示没有jquery的materializecss没有找到任何内容。 如果大海...
应用程序脚本 Web 应用程序 + 在动态表上实现自动完成的问题
我在强制物化自动完成在动态表上工作时遇到问题。它在表格的静态元素上运行良好。我正在使用js document.createElement。控制台告诉我 html 看起来是这样...
我的物化插件有问题，当用户使用鼠标选择标签时，标签不会向上移动，并且用户无法输入文本。 我想阻止用户选择实验室...
我有一个有几个输入的反应应用程序。问题是，每当我导航到该页面时，它都会使用之前在 Microsoft Edge（新的）上输入的数据自动填充所有字段。我用
粘性页脚适用于 HTML 项目，但不适用于 React 项目
我正在使用 React 构建一个 Web 应用程序。我创建了一个 html“沙箱”之类的东西来玩弄设计和感觉，这样我就可以轻松地向我的老板展示它的外观和效果
与材质选项卡一起使用时，浏览器调整大小会扭曲 ngx 数据表
我使用的是 ngx-datatable 19.0.0、Angular 版本 11.1.0 和 Material 版本 11.2.13。 当我直接在 ngx-datatable 中使用 props [columnMode]="'force'" 时，页面正确加载并且
Materialize - activeIndex 返回 -1
阅读完此处的自动完成文档后，为什么在 onAutocomplete 上它总是在控制台中记录值 -1 而不是数据数组中所选选项的 id ？ 阅读自动完成文档here后，为什么在onAutocomplete上它总是在控制台中记录值-1而不是从id数组中所选选项中记录值data？ <div class="input-field outlined s4" style="margin: 5px 5px;"> <i class="material-icons prefix">search</i> <input type="text" id="vincularSetor.colaborador_id.autocomplete" form="form_vincularSetor" class="autocomplete"> <label for="vincularSetor.colaborador_id.autocomplete">Nome do Colaborador</label> </div> <script> document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('[id="vincularSetor.colaborador_id.autocomplete"]'); var instances = M.Autocomplete.init(elems, { // specify options here minLength: 0, // shows instantly data: [ {id: 3, text: "Name 1"}, {id: 4, text: "Name 2"} ], onAutocomplete: () => { autocomplete = M.Autocomplete.getInstance(document.getElementById("vincularSetor.colaborador_id.autocomplete")); console.log(autocomplete.activeIndex); } }); }); </script> activeIndex 仅在自动完成下拉菜单打开并且用户使用键盘上/下按钮选择选项时使用。 为了找出所选项目，您可以从 onAutocomplete 的第一个参数中读取。 演示： document.addEventListener('DOMContentLoaded', function() { var elem = document.querySelector('[id="vincularSetor.colaborador_id.autocomplete"]'); M.Autocomplete.init(elem, { minLength: 0, data: [{ id: 3, text: "Name 1" }, { id: 4, text: "Name 2" } ], onAutocomplete: (selectedItems) => { var autocomplete = M.Autocomplete.getInstance(document.getElementById("vincularSetor.colaborador_id.autocomplete")); console.log(selectedItems); } }); }); <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/css/materialize.min.css"> <script src="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/js/materialize.min.js"></script> <div class="input-field outlined s4" style="margin: 5px 5px;"> <i class="material-icons prefix">search</i> <input type="text" id="vincularSetor.colaborador_id.autocomplete" form="form_vincularSetor" class="autocomplete"> <label for="vincularSetor.colaborador_id.autocomplete">Nome do Colaborador</label> </div>
Material design 图标，如何将它们居中为文本？
我一直在尝试使用 MaterializeCSS 制作某种带有 3 个链接的导航栏，每个链接的宽度为导航栏的 33%，并且我想将文本置于链接内的中心（甚至是图标） 如果我不放左...
我的 html 代码需要一些帮助。 我似乎找不到我的两张卡片不想在我的页面中并排显示的原因。 我想同时让两张卡片能够调整大小
我正在尝试学习如何使用物化框架（它用于大学作业）我已将该框架添加到我的项目中，但似乎该框架已以某种方式消失了... 我正在尝试学习如何使用物化框架（用于大学作业）我已将框架添加到我的项目中，但似乎该框架以某种方式消失了<select>，为什么会发生这种情况？ 这是我的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Inscripción en línea</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <script> $(document).ready(function(){ $("#nivel").on("change", function(){ var nivel = $(this).val(); crearListaCarreras(nivel); }); }); var oferta = { 'lic_e':['Administración y Dirección de Empresas', 'Derecho', 'Comunicación y Entornos Digitales', 'Ingeniería en Sistemas Computacionales', 'Psicología'], 'lic_m':['Administración', 'Derecho', 'Ingeniería Industrial', 'Informática'], 'mae_e':['Administración y Gestión de Instituciones Educativas', 'Derecho Fiscal', 'Derecho Privado', 'Redes y Telecomunicaciones', 'Impuestos'], 'doc_e':['Ciencias Administrativas', 'Derecho', 'Ingeniería en Tecnologías Emergentes', 'Educación'] }; function crearListaCarreras(nivel){ var carreras = $("#carrera").empty().append($("<option value=''>Seleccione una opción</option>")); if(nivel !== ""){ var lista_carreras = []; var costo = 0; switch(nivel){ case 'lic_e': lista_carreras = oferta.lic_e; costo = 1500; break; case 'lic_m': lista_carreras = oferta.lic_m; costo = 2500; break; case 'mae_e': lista_carreras = oferta.mae_e; costo = 3000; break; case 'doc_e': lista_carreras = oferta.doc_e; costo = 3500; break; } if(lista_carreras.length > 0){ $.each(lista_carreras, function(k,v){ carreras.append( $("<option>").text(v) ) }); $("#costo").val(costo); } } } </script> </head> <body> <div class="container"> <img src="https://servicios.ver.ucc.mx/icecc/img/logo_ucc_transparente.png" style="background:#002449"/> <h1>Inscripción en línea</h1> <h3>Ingreso</h3> Nivel<br> <select id="nivel"> <option value="">Seleccione una opción</option> <option value="lic_e">Licenciatura escolarizada</option> <option value="lic_m">Licenciatura mixta</option> <option value="mae_e">Maestría</option> <option value="doc_e">Doctorado</option> </select><br> Carrera<br> <select id="carrera"> <option value="">Seleccione una opción</option> </select> <h3>Datos personales</h3> C.U.R.P<br /> <input type="text" /><br> Nombre<br /> <input type="text" /><br> Apellidos<br /> <input type="text" /><br> E-mail<br /> <input type="text" /><br> Celular<br /> <input type="text" /><br> Teléfono<br /> <input type="text" /><br> Escuela de procedencia<br /> <input type="text" /> <h3>Información de pago</h3> Total a pagar<br /> <input type="text" id="costo" readonly/><br> Método de pago<br /> <input type="checkbox" /> depósito referenciado<br> <input type="checkbox" /> tarjeta de crédito o débito<br> <input type="checkbox" /> en cajas de la UCC<br> <input type="button" value="Enviar"/> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body> </html> 我尝试阅读文档，但事实证明它没有帮助。 这是因为你还没有初始化select。 来自Materialize官方文档 初始化 您必须初始化选择元素，如下所示。 此外，您将需要单独调用任何动态 生成页面生成的选择元素。 你可以使用Javascript或jQuery来初始化它，我使用的是jQuery。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Inscripción en línea</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <script> $(document).ready(function(){ $("#nivel").on("change", function(){ var nivel = $(this).val(); crearListaCarreras(nivel); }); }); var oferta = { 'lic_e':['Administración y Dirección de Empresas', 'Derecho', 'Comunicación y Entornos Digitales', 'Ingeniería en Sistemas Computacionales', 'Psicología'], 'lic_m':['Administración', 'Derecho', 'Ingeniería Industrial', 'Informática'], 'mae_e':['Administración y Gestión de Instituciones Educativas', 'Derecho Fiscal', 'Derecho Privado', 'Redes y Telecomunicaciones', 'Impuestos'], 'doc_e':['Ciencias Administrativas', 'Derecho', 'Ingeniería en Tecnologías Emergentes', 'Educación'] }; function crearListaCarreras(nivel){ var carreras = $("#carrera").empty().append($("<option value=''>Seleccione una opción</option>")); if(nivel !== ""){ var lista_carreras = []; var costo = 0; switch(nivel){ case 'lic_e': lista_carreras = oferta.lic_e; costo = 1500; break; case 'lic_m': lista_carreras = oferta.lic_m; costo = 2500; break; case 'mae_e': lista_carreras = oferta.mae_e; costo = 3000; break; case 'doc_e': lista_carreras = oferta.doc_e; costo = 3500; break; } if(lista_carreras.length > 0){ $.each(lista_carreras, function(k,v){ carreras.append( $("<option>").text(v) ) }); $("#costo").val(costo); } } } </script> </head> <body> <div class="container"> <img src="https://servicios.ver.ucc.mx/icecc/img/logo_ucc_transparente.png" style="background:#002449"/> <h1>Inscripción en línea</h1> <h3>Ingreso</h3> Nivel<br> <select id="nivel"> <option value="">Seleccione una opción</option> <option value="lic_e">Licenciatura escolarizada</option> <option value="lic_m">Licenciatura mixta</option> <option value="mae_e">Maestría</option> <option value="doc_e">Doctorado</option> </select><br> Carrera<br> <select id="carrera"> <option value="">Seleccione una opción</option> </select> <h3>Datos personales</h3> C.U.R.P<br /> <input type="text" /><br> Nombre<br /> <input type="text" /><br> Apellidos<br /> <input type="text" /><br> E-mail<br /> <input type="text" /><br> Celular<br /> <input type="text" /><br> Teléfono<br /> <input type="text" /><br> Escuela de procedencia<br /> <input type="text" /> <h3>Información de pago</h3> Total a pagar<br /> <input type="text" id="costo" readonly/><br> Método de pago<br /> <input type="checkbox" /> depósito referenciado<br> <input type="checkbox" /> tarjeta de crédito o débito<br> <input type="checkbox" /> en cajas de la UCC<br> <input type="button" value="Enviar"/> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script> $(document).ready(function(){ $('select').formSelect(); }); </script> </body> </html>