标签: materialize

Materialisecss图标不起作用?

我正在使用materializecss.但我不能让图标工作它说的话,但没有显示图标?

我包括了materializecss和js但仍然没有工作......

有人知道怎么修这个东西吗?

materialize

10
推荐指数
2
解决办法
1万
查看次数

如何使实现日期选择器(实际上是pickadate)可编辑?

我正在尝试使实体日期选择器可编辑.这是目标,用户可以直接在输入字段中写日期或使用小部件来选择日期.

我做了一些即将在这个jsfiddle上工作的东西.但是我正试图解决一个错误.当用户直接在输入中写入日期时,选择器也需要获取新值(因为我使用不同的格式来提交日期,并且有一个隐藏的输入字段要更新).要做到这一点,我试着这样做

picker.set('select', $(this.val());
Run Code Online (Sandbox Code Playgroud)

但是它会创建一个无限循环,因为实现中的方法set也会触发change输入上的事件.

编辑:哦,我刚刚发现在github上存在一个问题.你对解决方法有什么想法吗?

javascript materialize pickadate

10
推荐指数
1
解决办法
3984
查看次数

无法读取未定义的属性摆动

我正在使用materializecss的CDN版本

<html>
    <head>
        <!-- css -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
    </head>
    <body>
        <!-- page body -->

        <!-- scripts -->
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
        <script src="scripts/scripts.js"></script>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

并在控制台中收到以下错误

未捕获的TypeError:无法读取undefined的属性'swing'

at materialize.min.js:6

(匿名)@ materialize.min.js:6

html javascript materialize

10
推荐指数
1
解决办法
6151
查看次数

是否可以将React单页网站导出为HTML?

我有一个使用React和materialize-css的单页Web应用程序,我想将其导出为静态HTML和CSS,以便可以轻松编辑HTML以进行原型设计.是否可以至少导出当前状态的快照?

我在Firefox和Chrome中尝试过"保存页面",但它没有提供良好的效果.

html css mockups materialize reactjs

10
推荐指数
1
解决办法
4450
查看次数

从bootstrap转换为实现

是否可以转换使用bootstrap的网站使用实现CSS?这两个框架之间存在很多重叠,但我想知道引导程序中是否存在实现未命中的任何功能.

materialize twitter-bootstrap

9
推荐指数
1
解决办法
4700
查看次数

物化Navbar高度调整是否可行?

是否可以在Materialise中调整导航栏的高度?

64px对我的网站来说有点太多了.在我决定实现之前,我的目标是30px.

materialize

9
推荐指数
2
解决办法
1万
查看次数

使用*ngFor使用materialize-css框架为angular2创建一系列单选按钮

大家问候大家!

我有以下代码构建一个基于materialize-css框架的单一单选按钮http://materializecss.com/forms.html#radio

<input name = 'group1'
       type = 'radio'
       id = 'test2'/>
<label for = 'test2'>Yellow</label>
Run Code Online (Sandbox Code Playgroud)

我尝试使用*ngFor的方法如下所示:

  statuses: string[] = [
    'Single',
    'Married',
    'Divorced',
    'Common-law',
    'Visiting'
  ];

  <p>{{maritalStatus?.status}}</p>
  <div *ngFor = 'let status of statuses;  let indx = index'>
    <input #widget
           class = 'with-gap'
           name = 'statusGroup'
           type = 'radio'
           id = 'status'
           [value] = 'status'
           [(ngModel)] = 'maritalStatus.status'
           (change) = 'radioBtnChange$.next(status)'
    />
    <label for = 'status'>{{status}}</label>
    <p>{{status}}{{ indx}}</p>
  </div>
Run Code Online (Sandbox Code Playgroud)

创建所有按钮,但只能选择第一个按钮(单个).

我怎样才能获得按钮系列功能作为单选按钮的功能?

谢谢

materialize angular2-forms typescript2.0 angular

9
推荐指数
1
解决办法
1万
查看次数

使用webpack和SCSS在Angular2项目中实现物化

正如标题中的解释,我正在尝试将Materialise集成到我的Angular 2项目中.

该项目由" AngularCli " 生成

我正在使用" Webpack "和" Scss "

我找到的tuto都是不同的我不明白如何使用scss:

- 物化网站tuto

- Npm网站

我的角度cli json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "accident-chain-web-angular",
    "ejected": true
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "assets/scss/main.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "preprod": "environments/environment.preprod.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": …

sass materialize webpack angular-cli angular

9
推荐指数
1
解决办法
1518
查看次数

物化CSS sidenav'选项'未定义

我使用以下代码来找到materializecss网站中的NavBar.

<nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
</nav>

<ul class="sidenav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

文档说使用以下JavaScript代码来初始化插件.

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });
Run Code Online (Sandbox Code Playgroud)

但是,当它运行时说

"选项"未定义.

我不想为此目的使用jQuery.我怎样才能解决这个问题?

html javascript css css3 materialize

9
推荐指数
1
解决办法
3581
查看次数

如何在React中正确捕获Materialise-CSS datepicker值?

我正在使用materialize-css在我的React组件中创建一个带有日期选择器的表单。我没有很多字段可以捕获此表单,并且结构相当简单。返回的表单如下所示:

<form onSubmit={this.handleSubmit.bind(this)}>
     <div className="container">
          <div className="card grey lighten-3">
               <div className="card-content black-text">
                    <span className="card-title">
                            <input placeholder="Event Name"
                                    name="name" value={this.state.name}
                                    onChange={this.handleStateChange.bind(this)}/>
                    </span>
                    <input name="description" placeholder="Description"
                                      value={this.state.description}
                                      onChange={this.handleStateChange.bind(this)}/>
                    <input name="image" placeholder="Image URL"
                                      value={this.state.image}
                                      onChange={this.handleStateChange.bind(this)}/>
                    <input placeholder="Start Date"
                                className="datepicker" name="startDate" value={this.state.startDate}
                                onSelect={this.handleStateChange.bind(this)}/>
                </div>
                <div class="card-action">
                    <div className="row">
                        <span>
                           <div className="col s3">
                               <input className="btn light-blue accent-1" type="submit" value="Submit"/>
                           </div>
                           <div className="col s3">
                               <a className="btn grey" onClick={this.handleExpand.bind(this)}>Cancel</a>
                           </div>
                       </span>
                   </div>
               </div>
           </div>
       </div>
   </form>
Run Code Online (Sandbox Code Playgroud)

状态更改通过

handleStateChange(item) {
    this.setState({[item.target.name]: item.target.value});
}
Run Code Online (Sandbox Code Playgroud)

我打电话给 …

javascript datepicker materialize reactjs

9
推荐指数
1
解决办法
1563
查看次数