标签: materialize

我正在尝试使用Materialize在侧边栏中创建一个下拉菜单,但它不起作用.下拉列表的宽度与触发器的宽度不同,并且填充将锚点移动到列表项的底部.(代码与docs网站相同)

这是Codepen的问题:例子

谢谢您的帮助 :)

$(document).ready(function(){
      
      // Sidebar
      $(".button-collapse").sideNav({menuWidth: 320, activationWidth: 70, edge: 'left'});
      // Dropdown
      $('.dropdown-button').dropdown({
           inDuration: 300,
           outDuration: 225,
           constrain_width: false, // Does not change width of dropdown to that of the activator
           hover: false, // Activate on hover
           gutter: 0, // Spacing from edge
           belowOrigin: false // Displays dropdown below the button
           }
      );
    });

<div id="slide-out" class="side-nav full">
  <ul>
      <li><a href="#">First Link</span></a></li>
      <li><a href="#">Second Link</span></a></li>
      <!-- Dropdown Trigger -->
      <li><a class='dropdown-button' href='#' data-activates='dropdown1'>Drop Me!</a></li>
  </ul>
</div> …

我正在使用Materialise,我正在尝试创建一个包含复选框的表.但是,似乎存在问题.表中包含的复选框似乎不起作用.我不确定这是一个错误,还是我没有做正确的事情:

<form action="#">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>My Label</td>
        <td><input type="checkbox" class="filled-in" /><label></label></td>
      </tr>
    </tbody>
  </table>
</form>

如何使用Materialize在表格中包含复选框？

http://jsfiddle.net/qa37un79/

我用这个表格

<div class="row">
    <form class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <input id="email2" type="email" class="validate">
                <label for="email2" data-error="wrong" data-success="right">Email</label>
            </div>
            <div class="input-field col s12">
                <input id="example" name="example" type="text" class="validate" required="" aria-required="true">
                <label for="example" data-error="wrong" data-success="right">Field</label>
            </div>
        </div>
    </form>
</div>

邮件领域还可以.如果我在不正确的邮件地址发布错误消息出现.

示例字段不起作用.我会检查字段是否为空,然后显示错误.

怎么了？

我注意到materialized CSS图标没有显示出来Safari (v5.1.7 (7534.57.2).在这个主题上搜索了很多,但是没有任何关于浏览器兼容性的文档,其中列出了safari.任何人都可以让我知道这是一个需要修复的bug,还是有任何替代方法可以在Safari中使用它.

其它浏览器

Safari浏览器

PS:materializecss除了图标之外,其他功能也很好

我正在使用Materialize 0.97.7与Leaflet 1.0.1(最新)

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css">

当我尝试创建一个带有多个复选框以覆盖项目的叠加层时,不会出现任何复选框,只有标签可用作切换但我需要复选框或开关.如果我将CSS cdn切换到另一个框架,例如Bootstrap,它们会出现.

如果有人感兴趣的话,可以使用小册子代码:http://leafletjs.com/reference-1.0.0.html#layergroup

// items to toggle
var myItems = new L.LayerGroup();
// bind popup to each item once checkbox is selected
L.marker([lat, lon]).bindPopup('Item').addTo(myItems);
// create overlays multi-checkbox selection
var overlays = {
    Items = myItems
};
// add overlays to the web-map
L.control.layers(null, overlays).addTo(map);

这显然不是Leaflet问题,因为它适用于其他CSS

任何人都可以提供修复吗？

谢谢

设置tbody高度宽度时我遇到问题overflow-y: scroll.

我试过这个CSS

.table-status-sheet tbody{
  min-height: 300px;
  overflow-y: auto;
}

这是我的表格代码

 <div class="responsive-table table-status-sheet">
    <table class="bordered">
      <thead>
        <tr>
          <th class="center">No.</th>
          <th class="center">Category</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Category1</td>                 
        </tr>
        <tr>
          <td>2</td>
          <td>Category2</td>                 
        </tr>
        <tr>
          <td>3</td>
          <td>Category3</td>                 
        </tr>
        <tr>
          <td>4</td>
          <td>Category4</td>                 
        </tr>
      </tbody>
    </table>
  </div>

此代码在引导程序中工作,但在"物化"主题中不起作用.请帮我解决这个问题.

所以我尝试使用这里的解决方案：https : //stackoverflow.com/a/48058897/9642
但是，那没有用。我很自然地将 Angular 与 Typescript 一起使用。

我的打字稿类：

从“@angular/core”导入 { Component, OnInit, AfterViewInit, ViewChild, ElementRef };
import * as M from 'materialize-css/dist/js/materialize';

@成分（{
    选择器：“应用列表导航”，
    templateUrl: './list-nav.component.html',
    styleUrls: ['./list-nav.component.css']
})
导出类 ListNavComponent 实现 OnInit、AfterViewInit {

    @ViewChild('collapsible') elCollapsible: ElementRef;

    构造函数（）{}

    ngOnInit() {

    }

    ngAfterViewInit() {
        const instanceCollapsible = new M.Collapsible(this.elCollapsible.nativeElement, {});
    }

}

在 HTML 部分，元素的 ID 为“collabsible”，类为“collabsible”。然而我得到了这个错误：

 ng:///AppModule/ContentComponent.ngfactory.js:12 错误类型错误：无法读取未定义的属性“nativeElement”
    在 ListNavComponent.ngAfterViewInit (webpack-internal:///../../../../../src/app/list-nav/list-nav.component.ts:20)
    在 callProviderLifecycles (webpack-internal:///../../../core/esm5/core.js:12922)
    在 callElementProvidersLifecycles (webpack-internal:///../../../core/esm5/core.js:12889)
    在 callLifecycleHooksChildrenFirst (webpack-internal:///../../../core/esm5/core.js:12872)
    在 checkAndUpdateView (webpack-internal:///../../../core/esm5/core.js:14027)
    在 callViewAction (webpack-internal:///../../../core/esm5/core.js:14369)
    在 execComponentViewsAction …

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

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

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

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

我不想使用Vue-Material或Vuetify。

我想使用Materialize。我要做的是：

npm install materialize-css@next

在main.js中，定义了我的新Vue App的地方，我像这样导入Materialize：

import 'materialize-css'

javascript可以正常工作，但是CSS无法加载；我用Card Reveal进行测试。

交换动画有效，但未设置样式。Card Reveal是我要使用MaterializeCss的原因之一，而其他两个都不提供此功能。而且我还想使用“普通” HTML元素，而不是使用100个新元素（例如，在vuetify中）。

我已经用实体化库做了一个下拉菜单。它包含项目列表。现在我想在所有项目的底部查看更多链接。该链接已成功添加，但问题是当我单击该链接下拉列表/选择被关闭时。

const select = document.querySelector("select");

const fillSelect = (newOptions) => {
   const options = select.querySelectorAll("option");
   options.forEach((x) => x.remove());
   newOptions.forEach((opt) => {
      
      const optionElement = document.createElement("option");
      optionElement.innerHTML = opt;
      select.appendChild(optionElement);
   });
   updateSelect();
};

const addViewMoreLink = () => {
  const link = document.createElement('div');
  link.innerHTML = 'View more';
  link.addEventListener('click', e => {
    e.preventDefault();
    e.stopPropagation();
    return false;
  })
  const dropdownContent = select.parentNode.querySelector(".dropdown-content");
  dropdownContent.appendChild(link);
}


const updateSelect = () => {
  window.M.FormSelect.init(select, {});
  
  
}

window.onload = function(){
  fillSelect(["Option 1", "Option 2", "Option 3"]);
  addViewMoreLink() …