标签: materialize

正如标题中的解释,我正在尝试将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": …

我使用以下代码来找到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>

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

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

但是,当它运行时说

"选项"未定义.

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

我正在开发一个使用Materialise css作为前端的项目.

有没有办法在Materialise css中获取下拉列表的多选项？

任何信息都会有所帮助.

当我尝试使用下面的代码创建一个实现css moal时,我收到错误.

<script src="~/Scripts/jquery-1.10.2.js"></script>


<link href="~/css/materialize.css" rel="stylesheet" />
<script src="~/js/materialize.js"></script>

<a id="btnReset" class="waves-effect waves-light btn modal-trigger" data-target="modal1">Reset</a>

    <!-- Modal Structure -->
    <div id="modal1" class="modal">


        <div class="modal-content">
            <h4>Warning !</h4>
            <p>Do you really want to reset ?</p>
        </div>
        <div class="modal-footer">
            <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Yes</a>
            <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">No</a>
        </div>
    </div>

<script>

    $(document).ready(function () {
        // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
        $('.modal-trigger').leanModal();

    });
</script>

错误图片 …

Materialize框架带有奇怪的布局(至少对我而言).我在列之间找不到任何余量.这是我的代码:

<div class="container">
<div class="row">
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos     
  </div>
</div> 
</div>

这就是浏览器的外观.

列之间没有边距!

我想让Submit按钮的长度与它上面的输入字段相同.

<div class="row">
     <div class="input-field col s12">
        <input id="speciality" type="text" class="validate">
            <label for="speciality">Speciality</label>
     </div>
</div>
<div class="row">
    <button class="btn waves-effect waves-light" type="submit" name="action">Search
        <i class="material-icons right">search</i>
    </button>
</div>

我想在没有jQuery的情况下使用materializecss.例如,我想在不使用jQuery的情况下执行以下操作:

$('.chips-initial').material_chip({
    data: [{
      tag: 'Apple',
    }, {
      tag: 'Microsoft',
    }, {
      tag: 'Google',
    }],
  });

谢谢

我用angular-cli创建了一个angular4项目.我想实现-css @ next library.所以我用它安装了它

npm install materialize-css@next --save

所以这个安装

"materialize-css": "^1.0.0-alpha.2",

然后在angular-cli.json中我添加了对css和js文件的引用

"styles": [
   "styles.css",
   "../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
   "../node_modules/materialize-css/dist/js/materialize.js"
],

现在这适用于普通组件,如按钮和导航栏,因为这些组件不需要任何js.

如何创建动态元素,如轮播,可折叠和其他需要js的组件？

正如我用Google搜索的那样,有像angualr2-materialize这样的包装库

所以我安装了这个

npm install angular2-materialize --save

并在我的app.module.ts中导入了该模块

import { MaterializeModule } from 'angular2-materialize';

然后在imports数组中@NgModule

imports: [
  BrowserModule,
  MaterializeModule
],

当我使用以下标记时

<a class="waves-effect waves-light btn modal-trigger" (click)="openModal()">Modal</a>

<div id="modal1" class="modal bottom-sheet" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
    <div class="modal-footer"> …

我正在尝试创建一个表单,以便用户可以保存setting具有默认teams(多个)和他们professions(单个)的表单.我可以使用simple_form以下代码行完成此操作,但我尝试使用自动完成功能,因为下拉列表与我的设计不兼容.

• <%= f.association :profession %>
• <%= f.association :team, input_html: { multiple: true } %>

我正在将一个集合中的JSON加载到data-autocomplete-source我的一个属性中inputs,jquery然后稍微循环一下这些属性,然后初始化实现.autocomplete,我还需要.chips为许多关联做这个.

UI元素正在按照我的意愿工作,但我无法弄清楚如何保存新记录.我有两个问题:

1. Unpermitted parameters: :team_name, :profession_name- 我一直在努力调整本教程并相信Step 11会在模型中有效地转换它,但显然不理解某些东西......
2. "setting"=>{"team_name"=>"", "profession_name"=>"Consultant Doctor"}- 尝试保存记录时未识别team_name值(即chips).我有一些讨厌的jQuery转移了对id从div所生成的input,我希望会工作...

我还检查过很多关于Stack Overflow的问题(其中一些似乎与这个问题类似,通常使用jqueryui),但无法弄清楚如何调整答案.

如何在实体化chip和autocomplete输入中使用模型中的名称并将它们的关联保存id到记录中？

任何帮助或指导将不胜感激.

setting.rb

class Setting < ApplicationRecord

  has_and_belongs_to_many :team, optional: true

  belongs_to :user
  belongs_to …

Materialize datepicker在其他浏览器和旧版本的Google Chrome中都可以正常工作，但在新版本的Google Chrome中无法正常工作

<input type="date" class="datepicker">

JS

$('.datepicker').pickadate({

selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});

Datepicker的Codepen链接