标签: materialize

我正在尝试使用Materialize创建一个日期选择器.根据文档,当用户选择日期时,datepicker应该关闭.

这不适用于我的页面.我在Windows上使用最新的Chrome浏览器.我试过IE浏览器,但是整个日期选择器没有显示...

单击此处查看我的页面(输入3和4是日期选择器)

我的javascript:

$('#due_date').pickadate({
  monthsFull: [ 'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december' ],
  monthsShort: [ 'jan', 'feb', 'maa', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec' ],
  weekdaysFull: [ 'zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag' ],
  weekdaysShort: [ 'zo', 'ma', 'di', 'wo', 'do', 'vr', 'za' ],
  today: 'vandaag',
  clear: 'verwijderen',
  close: 'sluiten',
  firstDay: 1,
  format: 'dd-mm-yyyy',
  formatSubmit: 'yyyy/mm/dd',
  closeOnSelect: true,
  selectMonths: true, // Creates a dropdown to control …

我的理解是Materialise不支持样式化的多选框 - 您必须指定浏览器默认值而不使用Materialize样式.(如我错了请纠正我)

因此,我尝试使用下拉列表中的复选框与Materialize下拉列表等效,如下所示:

<a class='dropdown-button btn-flat' href='#' data-activates='topics_dropdown' data-hover="true">
Relates to topics...</a>
<ul id='topics_dropdown' class='dropdown-content'>
    <li>
      <input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" />
      <label for="report_topics_409928004">Engagement</label>
    </li>
    <li>
      <input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" />
      <label for="report_topics_669658064">Appraisal</label>
    </li>

    <!-- etc. -->

</ul>

但是如何渲染它会有一个小问题.文本和框向下偏移半行,因此突出显示悬停效果会突出显示一个与两个不同选项重叠的矩形.有没有办法纠正这个故障？

这是一个截图.它与上面的示例代码不同,但它是相同的dropdown-checkbox结构.

我正在制作一些使用Materialal(s)和Materialisecss的博客,但我的模态onclick外部和假数据有问题,这里是我的代码

main.js

function changepassword(){
 var user = $('#userlog').val();
 var content  = ""; 

content += '<div id="modganpas" class="modal modal-fixed-footer">';
content += '<div class="modal-content">';
content += '<form>';        
content += '<style="text-align:center;font-size:12px;font-weight:bold;"><h3>change Password</h3>';
content += '<div><i class="material-icons">supervisor_account</i>';             
content += '</div>';
content += '<div class="row">';
content += '<div class="input-field col s12">';
content += '<input id="changeUsername" name="changeUsername" type="text" class="validate" disabled>';
content += '</div>';
content += '<div class="input-field col s12">';
content += '<input id="changePasswordold" maxlength="32" name="changePasswordold" type="password" class="validate">';
content += '<label for="changePasswordold">Password old</label></div>'; …

我正在使用一个带有很多选择的选择的Web应用程序。问题是某些选项在屏幕上看不到，因为MaterializeCSS的选择似乎可以滚动。我该如何解决？

HTML和PHP

<div class="main container">
<div class="section">
  ...
  ...
  <div class="row">
    <div class="input-field col s12 m8 offset-m2 l6 offset-l3">
      <select>
        <option value="" disabled selected>Choose a degree program</option>
        <?php
        foreach ($degrees as $degree){
          echo '<option value="'.$degree.'">'.$degree.'</option>';
        }
        ?>
      </select>
      <label>Degree program</label>
    </div>
  </div>
</div>
</div>

的CSS

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.main {
  flex: 1 0 auto;
}

是否有参数使物化旋转木马滑块自动播放？

$('.carousel').carousel();

例如(此参数不起作用):

$('.carousel').carousel({
   autoplay: true
});

谢谢!

我正在尝试使用materialize构建一个1页垂直滚动网站,顶部有一个导航栏,现在,materialize只有左侧或右侧对齐链接的类,徽标可以居中对齐但不是链接本身,

我一直在向UL和一个包装器div添加中心对齐和中心类,并且尝试使用网格没有成功,这是我的代码:

HTML

   <div class="navbar-fixed"  >
    <nav id="nav_f" class="transparent z-depth-0" role="navigation" >
        <div class="container">



            <div class="nav-wrapper"  >

             <div class="row s12">

            <div>
                  <ul class="hide-on-med-and-down navbar " >
                      <li><a id="desk-about-us" href="#about-us">ABOUT US</a></li>
                      <li><a href="#how-it-works">HOW IT WORKS</a></li>
                      <li><a href="#comments">COMMENTS</a></li>
                  </ul>
                </div>
              </div>

                <ul id="nav-mobile" class="side-nav side-nav-menu ">
                    <li><a href="#about-us">ABOUT US</a></li>
                    <li><a href="#how-it-works">HOW IT WORKS</a></li>
                    <li><a href="#comments">COMMENTS</a></li>
                </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse right"><i class="material-icons">menu</i></a>
            </div>

       </div>
    </nav>
</div>

在我的CSS上,只有链接的悬停行为和背景颜色的下划线,

我正在使用带有materializecss的Angular2.目前我正在尝试创建按钮单击时打开的模态对话框.文档https://www.npmjs.com/package/angular2-materialize中也有一个示例.

我也使用materilize-select,它完全正常,所以我猜安装,进口等都是正确的.

问题是,当我点击模态触发器时,路由器解析新的路由"localhost:4200 /#modal1",我被重定向到我的起始页.

我也尝试用href替换,data-target="modal1"但这也不起作用.

我可以以某种方式禁用路由器的哈希链接吗？我的其他路线没有哈希.

下面是来自npm docs的例子.我复制了这部分1:1.

<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

任何帮助/提示表示赞赏!

编辑:我更改了锚点以在单击时调用函数

<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" (click)="openModal()>Modal</a>

哪个触发

$('#modal1').openModal()

但现在我得到一个错误: j.velocity不是一个函数

编辑2:

通过使用jQuery而不是$来打开模态.我仍然得到错误,打开模态后应用程序被卡住了.

我正在尝试创建一个可以呈现页眉和页脚的布局组件.所以,我可以在以后使用的布局像

<Layout> ... </Layout>

显然,我在页眉和页脚中使用了Routing.要做到这一点,我需要使用

<Router history...
 <Route path...

当我在layout.js中逐个执行此操作时(对于页眉和页脚:虽然我觉得这是错误的).有用.页眉和页脚显示在浏览器中.但是,它们无法正常工作.在刷新时,页脚消失,​​有时两者都消失,页眉和页脚.我坚信,一个接一个地渲染路由器是造成这种故障的原因,但我无法弄清楚正确的方法.此外,我不想使用以下代码段

header.js

import React from 'react';
import {Link} from 'react-router'
import {Navbar, NavItem} from 'react-materialize';

export default React.createClass({
  render(){
    return (
    <div>
      <Navbar brand='logo' right>
        <NavItem><Link to="/Home" activeClassName="active">Home</Link></NavItem>
        <NavItem><Link to="/Sign-In" activeClassName="active">Sign In</Link></NavItem>
        <NavItem><Link to="/Register" activeClassName="active">Register</Link></NavItem>
      </Navbar>
      {this.props.children}
    </div>
    )
  }
})

footer.js

import React, {Component} from 'react';
import {Link} from 'react-router'
import {Footer} from 'react-materialize';
import '../../resource/template.css'


class RT_Footer extends Component{ …

我想在一个项目中使用Laravel和Materialize css.通过sass文件执行此操作的最佳方法是什么？我正在寻找使用laravel内置的webpack系统.该网站说如果你想使用SASS,这里是源代码,你需要一个scss编译器.谢谢,非常有用.不.

对于这个非常冗长的例子,我将从一个新的laravel安装开始.

默认webpack.mix.js:

const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

此默认配置有效:

$ npm run dev
 DONE  Compiled successfully in 4287ms                                                                                                                    11:19:15 PM

                                                                    Asset      Size  Chunks                    Chunk Names
  fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1   20.1 kB          [emitted]
  fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760    109 kB          [emitted]
  fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512   45.4 kB          [emitted]
 fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158   23.4 kB          [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb     18 kB          [emitted]
                                                               /js/app.js   1.16 MB       0  [emitted]  [big]  /js/app
                                                             /css/app.css    686 kB       0  [emitted]  [big]  /js/app
                                                        mix-manifest.json  66 bytes          [emitted]

但我想使用物化:

$ npm install materialize-css --save-dev
/home/vagrant/Code/laravel …

Materialise已将图标分为五种格式: -

圆形,填充,轮廓,两个音,夏普.

以下是https://material.io/tools/icons链接 .

但是所有类别都有相同的链接用于显示图标(在先前版本中将显示默认图标).我可以下载png图像,然后使用,但这不是有效的方法.我搜索了很多但没找到任何东西？有没人用过它？