materialize 相关问题

基于Material Design的开源，现代，响应式前端框架

阅读完此处的自动完成文档后，为什么在 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>

javascript jquery materialize

回答 1 投票 0

Material design 图标，如何将它们居中为文本？

我一直在尝试使用 MaterializeCSS 制作某种带有 3 个链接的导航栏，每个链接的宽度为导航栏的 33%，并且我想将文本置于链接内的中心（甚至是图标）如果我不放左...

html css material-design materialize

回答 5 投票 0

在 Html 或 Css 中并排放置卡片（卡片显示）

我的 html 代码需要一些帮助。我似乎找不到我的两张卡片不想在我的页面中并排显示的原因。我想同时让两张卡片能够调整大小

html css materialize

回答 1 投票 0

<select>和框架出现问题

我正在尝试学习如何使用物化框架（它用于大学作业）我已将该框架添加到我的项目中，但似乎该框架已以某种方式消失了... 我正在尝试学习如何使用物化框架（用于大学作业）我已将框架添加到我的项目中，但似乎该框架以某种方式消失了<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>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">  <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>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">  <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>

javascript html css materialize

回答 0 投票 0

rails 7.1.3 不执行 application.js

大家好，我一直在使用 Rails 7.1.3，我在 javascript 方面遇到了一些问题，其中 application.js 确实编译了我的 jquery，如果你能帮助我，我将非常感激你...

javascript jquery ruby-on-rails materialize

回答 1 投票 0

从 Chrome 打印时考虑响应式布局

我用materializecss做了一个很好的响应式布局。现在，当我尝试从 Chrome 打印它时，布局与移动设备上的布局相同。这意味着布局看起来很糟糕，因为我的页面（...

css google-chrome printing responsive materialize

回答 3 投票 0

使用 Materialize css 时，窗口在下一个 js 中未定义

我正在使用 Next.js，当我尝试从 'materialize-css' 导入 M；我收到此错误：窗口未定义

next.js materialize

回答 2 投票 0

jquery 验证显示未捕获的类型错误

尝试实现jquery验证，因为我需要能够验证隐藏的输入。我在文档中初始化了插件，但在提交时，我收到以下错误：未捕获的类型错误：

jquery jquery-validate materialize

回答 3 投票 0

为什么我的搜索栏出现在wearg位置？

单击搜索栏空白后，导航栏上应出现该空白。然而，当使用Chrome时，它出现在错误的位置：它在 Firefox 上看起来正确：（但是网站的布局很糟糕......

html css layout materialize

回答 1 投票 0

无法让 Materialise css 下拉菜单与动态加载的模态一起使用

我有一个使用 MaterializeCSS 运行的 Rails 应用程序。我通常在应用程序中的许多地方使用 Materialize，包括 JS 对象（如 FAB 按钮），并且一切正常......除了下拉菜单

jquery ruby-on-rails materialize

回答 3 投票 0

在物化中更改表单元素的颜色

我如何更改表单输入元素（文本、密码、标签、选择、文本区域）标签和边框底部的颜色。 ** 我尝试了 Materialise CSS 文档中提到的样式。但它不起作用。*...

html forms material-design materialize

回答 2 投票 0

Material Angular 会自动聚焦在第一个按钮上，直到我单击

此表单字段中的第一个按钮始终自动对焦当我点击其他地方时它就消失了此表单字段中的第一个按钮始终自动聚焦当我点击其他地方时它就消失了 <form [formGroup]="addFundsForm"> <mat-form-field floatLabel="always" class="h-[118px] w-[199px]" appearance="outline"> <mat-label>Amount</mat-label> <div class="flex justify-center items-center relative top-3"> <div class="custom-input">{{customAmountCoin}} </div> <span class="text-gray-100 text-2xl font-semibold flex items-center"> <svg></svg> <div>-Coins</div> </span> </div> <div class="flex relative top-1"> <button mat-icon-button tabindex="0" (mousedown)="startDecrement()" (mouseup)="stopDecrement()" (mouseleave)="stopDecrement()"> <div class="text-white">-</div> </button> <div class="flex items-center text-sm font-semibold text-primary-500"> <input matInput style="color: #ea0a8e; font-size: 16px" formControlName="addFundsFormControl" type="number" class="text-center font-semibold text-primary-500"> </div> <button mat-icon-button tabindex="1" (mousedown)="startIncrement()" (mouseup)="stopIncrement()" (mouseleave)="stopIncrement()"> <div class="text-white">+</div> </button> </div> </mat-form-field> </form> 您可以通过两种方式解决此问题：您可以更改此行<form [formGroup]="addFundsForm">：<form [formGroup]="addFundsForm" [autofocus]="false"> 您可以添加隐藏输入来捕获自动对焦行为，如下所示： <form [formGroup]="addFundsForm"> <input type="text" style="display:none"> <mat-form-field floatLabel="always" class="h-[118px] w-[199px]" appearance="outline"> <mat-label>Amount</mat-label> ....... </form>

css angular angular-material materialize

回答 1 投票 0

如何使用 Materialise 日期选择器正确设置完整日期

我刚开始使用 Materialise Date Picker，在正确设置完整日期值时遇到了问题。下面是我的步骤... 我的 HTML 我刚开始使用 Materialize Date Picker，并且在正确设置完整日期值时遇到了问题。以下是我的步骤... 我的 HTML <div class="input-field col s6"> <input id="DatePicker" type="text" class="datepicker" /> <label class="" for="DatePicker">Date Picker</label> </div> 我的日期选择器 JavaScript var mDatePicker = document.querySelector("#DatePicker"); var optionsDPS = { disableDayFn: function (day) { console.log("value:", day); return day; } } M.Datepicker.init(mDatePicker, optionsDPS); 当我通过 Firefox 打开开发人员工具时，单击日历时会得到以下值：为什么 Materialise 将每个日期值的选取器值设置为 19:00:00？不应该是00:00:00吗？如何让这些值全部为 0，同时仍然是真实的日期值？我尝试使用 setHours(0, 0, 0, 0)，但没有成功。我只是对所有数字感到困惑，为什么 19 会出现在这个组合中.. var mDatePicker = document.querySelector("#DatePicker"); var optionsDPS = { disableDayFn: function (day) { console.log("value:", day); return day; }, defaultDate: new Date(), // Set the default date to the current date setDefaultDate: true // Enable setting the default date } M.Datepicker.init(mDatePicker, optionsDPS); 此修改应将默认日期设置为当前日期，时间设置为 00:00:00。如果想设置默认日期为特定日期，可以替换new Date()

javascript materialize

回答 1 投票 0

有什么方法可以在materializedcss中将按钮的标题从大写字母更改为小写字母吗？

我正在使用物化CSS来设计我的个人网站。当我使用该按钮时，其标题始终以大写字母显示。我试图改变它，但没有成功。谁能帮我解答一下...

materialize

回答 6 投票 0

React-leaflet 在 Modal 中无法正确显示

大家！我尝试在我的 React 项目中使用 Materialise 风格的 React-leaflet。当我打开模态组件时，我看不到地图。我安装了npm install react-leaflet，也在index.html中添加了大家！我尝试在我的 React 项目中使用 Materialise 风格的 React-leaflet。当我打开模态组件时，我看不到地图。我安装了 npm install react-leaflet，还在index.html [email protected]/dist/leaflet.css 中添加了“ 完整性=“sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=” 跨域=“”/> import React, { useEffect, useRef } from "react"; import PropTypes from "prop-types"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; export const MapModal = ({ lnglat }) => { const mapRef = useRef(null); useEffect(() => { // Clean up the map instance when the modal is closed return () => { if (mapRef.current) { mapRef.current.remove(); } }; }, []); return ( <div id='MapModal' className='modal'> <div className='modal-content'> <MapContainer center={[48.0196, 66.9237]} zoom={5} style={{ height: "50vh", width: "100%" }} ref={mapRef} > <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' /> <Marker position={lnglat}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer> </div> </div> ); }; MapModal.propTypes = { lnglat: PropTypes.array, }; 请帮我解决这个问题吗？将此添加到导入中import 'leaflet/dist/leaflet.css';我遇到了同样的问题，这解决了它。你需要添加一个中间组件来等待引导模态完成初始化，即从你的主组件中添加一个中间组件，在中间组件中你必须设置一个设置的超时时间，例如： useEffect(() => { setTimeout(function() { setShowMap(true); }, 2000); }, [isShowMap]); //In the return: { showMap ? < CustomMap lat = { lat } lng = { lng } setlat = { setlat } setlng = { setlng } />: < div > < /div> }

reactjs modal-dialog materialize react-leaflet

回答 2 投票 0

如何制作Materialise Jumbotron

我正在尝试构建一个像这样的注册页面注册页面我检查了源代码，它使用角度材料设计。所以无法弄清楚如何使用 Macialize.css 本身来做到这一点。我...

css angularjs materialize

回答 2 投票 0

物化中的选择框无响应

我正在使用带有节点后端和js前端的materialize。我正在尝试提交表格。我有以下内容：我正在使用带有节点后端和js前端的materialize。我正在尝试提交表格。我有以下内容： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <div class="container"> <div class="row"> <div class="col s6"> <div class="card"> <div class="card-content"> <span class="card-title">Form Example</span> <div class="input-field"> <input type="text" id="zip" name="zip" class="validate" pattern="\d{5}" title="Please enter a 5-digit zip code" /> <label for="zip">Zip Code</label> </div> <div class="input-field"> <select id="area" name="area" class="validate"> <option value="2000">2,000 sqft</option> <option value="3000">3,000 sqft</option> </select> <label for="area">Area</label> </div> </div> <div class="card-action"> <a class="waves-effect waves-light btn" id="submitButton">Submit</a> </div> </div> </div> </div> </div> <div id="hot-container" class="mt-4">  </div> 我的第二个字段（区域）有错误，该字段呈灰色且半可见。它没有反应。我做错了什么？看起来 validate 类不适用于 select 元素。 docs 中找到的示例并未说明 validate 类。也许，验证（即拒绝任何空值）可能已内置在 select 元素中。关于半可见的问题，你能检查一下height类是否有固定的div.container值吗？理想情况下，容器应根据其承载的物品数量进行扩展。

javascript node.js materialize

回答 1 投票 0

具体化。访问自动完成元素属性

我想答案应该很简单，但我要疯狂地寻找答案。假设我有一个像这样定义的 Materialize 自动完成元素。 $('#element_id).autocomplete({ ...

properties autocomplete materialize

回答 1 投票 0

如何在nodejs中使用MaterializeCSS？

我运行了以下命令： npm 安装 Materialize-css --save npm 安装hammerjs --save npm 安装 jquery --save 然后在我的 app.js 中，var Materialize = require('materialize-css'); 乙...

node.js materialize

回答 7 投票 0

如何更改Material UI（版本5.14.6）文本字段组件的光标起始位置？

我们如何更改Material UI 文本字段组件的光标起始位置？我们正在使用最新版本的 Material UI，并且我们在我的项目中使用 Test Field 组件，但是 cu...