标签: 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 …

如何动态初始化SPA的物化设计精简版(google)的组件？当我在视图中动态初始化组件时,JS没有初始化.正如我尝试使用componentHandler的许多解决方案.

我在我的模板中有这个代码:

<div class="input-field col s6">
    <select v-on:change="selectChaned" v-model="item.size">
        <option value="" disabled selected>Choose your option</option>
        <option v-on:click="optionClicked" v-for="size in case_sizes" v-bind:value="{{ size }}">{{ size }}</option>
    </select> 
    <label for="size">Size</label>
</div>

根据Materialisecss文档,我调用$('select').material_select();将默认选择字段转换为可爱的东西.什么也不会-它取代<select>,并<option>用标记<ul>和<li>.因此,我无法在ViewModel js文件中访问item.size的值.我甚至试图听一下选项字段的点击并调用optionClicked方法(这应该只是提醒一条消息),试图收听selectChaned.没有.

如何在ViewModel中获取选项值？

ps仅供参考:我只对选择字段有疑问.输入字段例如工作正常:

<input placeholder="" name="name" type="text" class="validate" v-model="item.name">

在ViewModel中,我可以访问 item.name

我正在使用Materialise CSS并使用可折叠的手风琴风格元素(http://materializecss.com/collapsible.html).

出于某种原因,在第5个选项之后我无法选择任何东西. 这是图片.我不知道为什么在第五个选项(Terrengan u)之后我无法选择任何东西.

当点击吉兰丹时,之前选择的值不会更新到它,而吉兰丹上面的任何东西都可以使用.

这是我的代码.我的目标只是能够按预期使用可折叠(即元素打开并保持打开状态).

<div class="modal">
    <div class="input-field col s4 m6 l12">
        <select class="icons">
            <option value="" disabled selected>Choose your state</option>
            <option value="" data-icon="images/flag/perlis.jpg" class="left circle responsive-img">Perlis</option>
            <option value="" data-icon="images/flag/kedah.jpg" class="left circle responsive-img">Kedah</option>
            <option value="" data-icon="images/flag/penang.jpg" class="left circle responsive-img">Pulau Pinang</option>
            <option value="" data-icon="images/flag/perak.jpg" class="left circle responsive-img">Perak</option>
            <option value="" data-icon="images/flag/terrenganu.jpg" class="left circle responsive-img">Terenggan    u</option>
            <option value="" data-icon="images/flag/kelantan.jpg" class="left circle responsive-img">Kelantan</option>
            <option value="" data-icon="images/flag/pahang.jpg" class="left circle">Pahang</option>
            <option value="" data-icon="images/flag/selangor.jpg" class="left circle">Selangor</option>
            <option value="" data-icon="images/flag/sembilan.jpg" class="left circle">Sembilan</option>
            <option …

我有一个选择框,其中的选项和选择通过Knockout.js处理.我想使用Materialise CSS来设置它的样式.

这对于初始显示选择框是正常的,并且当选项被添加到Knockout.js'选项'observableArray时,使用'optionsAfterRender'绑定到(重新)初始化后添加每个选项(浪费,但有效) .

删除选项时,Knockout.js不提供类似'optionsAfterRender'的任何内容,因此没有明显的方法可以触发Materialize CSS魔法的重新初始化.

问题:您可以看到任何非疯狂的选项吗？

码:

<select data-bind="

      options: options,
      optionsText: function(item) { return optionsText[item] },
      value: displayedValue,

      optionsAfterRender: function (option, item) {
         setTimeout(function() {
            $(option.parentElement).material_select();
         }, 0);
      }
     ">
</select>

('setTimeout'是必要的,否则不会选择所选的选项.)

我正在使用一个带有很多选择的选择的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;
}

对不起,如果问题很简单,但我是使用materializeCss的新手

因为我可以增加模态materializecss的高度和宽度??

我正在使用materializecss,所以我已经有了材料设计图标.如何background-image在CSS代码中使用它们作为值(实际上是SASS)？

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

<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{ …

materialize选项卡的默认颜色为粉红色.也是活动标签的下划线.我想自定义并添加一些样式.我怎么做？