标签: materialize

我有一个使用 Materialize CSS 的侧边菜单。它包含三个菜单项，每个菜单项都有一个图标。我的问题是图标太高了 - 图标的底部与文本的底部一致。我希望它使图标垂直位于文本的中间。这是我的 li 的样子：

<li class="logout-btn"><a href="#"><i class="material-icons">power_settings_new</i> Logout</a></li>

这是侧边栏导航中的样子：

如果有人知道修复，那就太好了！

在 Laravel 中使用 Materialize CSS，根据某些情况，我希望能够禁用“Collapsible”元素，就像你可以通过添加“禁用”类轻松使用“标签”一样，如果你需要，例如：

<li @if(count($devices) == 0) class="tab col s4 disabled" @else class="tab col s4" @endif><a href="#mydevices">My Devices</a></li>

标签元素：MaterializeCSS 标签

可折叠元素：MaterializeCSS 可折叠

但这不适用于可折叠元素。解决方法只是隐藏整个元素，但禁用会向用户显示他们可能会去哪里做更多事情等。

所以这是我试图禁用的一点：

<div @if(count($devices) == 0) class="collapsible-header disabled" @else class="collapsible-header" @endif>My Devices</div>

想法/想法赞赏:)

我想在单击按钮时显示日期选择器。我试过了，但我无法让它工作。我正在使用 Materialise Css。我曾尝试使用输入类型文本，但我不想要它。

<div class="container">
     <div class="row center">
       <i>Date</i>
       <button class="btn waves-effect waves-light datepicker" type="submit" name="action">PICK DATE</button>
     </div>
   </div>

jQuery：

$('.datepicker').pickadate({
    selectMonths: true, 
    selectYears: 15 
  });

我有这个 html使用 materialize css

<!-- Sign Up Card row -->
<div class="row">
      <div class="col s12 m12">

        <div class="card">
          <div class="card-content">

            <span class="card-title"><h3>Sign up to find out more.</h3></span>

              <form class="container">
                <div class="input-field col m6">
                  <input id="email" type="email" class="validate">
                  <label for="email">Email</label>
                </div>

                <div class="input-field col m6">
                  <button class="btn waves-effect waves-light" type="submit" name="action">
                    Submit <i class="material-icons right">send</i>
                  </button>
                </div>

              </form>  

          </div>          
        </div>
      </div>
    </div><!-- End of Sign Up Card row -->

这给了我这个结果

当我col m6从input-fielddiv 中删除类时，它会在卡片中正确显示它们，但将它们堆叠在另一个之上。

如何实现同时具有divs 内 …

我正在尝试打开从上到下下垂的物化模态，就像在这个小提琴中一样，但从上到下反转。不幸的是，很难在 materialize modal 上修改一些东西，因为一些 css 属性是从 materialize js 添加的。“bottom-sheet”类添加了从下到上的特殊效果，但不存在“top-sheet”类。

.modal.bottom-sheet {
  top: auto;
  bottom: -100%;
  margin: 0;
  width: 100%;
  max-height: 45%;
  border-radius: 0;
  will-change: bottom, opacity;
}

那么如何修改打开效果要反转，模态要从上到下打开呢？

我们有这个字体真棒图标 fa fa-twitter，它在当前时间旁边的实际工具提示按钮旁边我需要做的是将它放在工具提示中

<div class="center">
  <i class="fa fa-twitter"></i>
  <a class="btn tooltipped" data-position="bottom" data-delay="50" data-customcss="csszzz"  data-tooltip="I am tooltip" >Hover me!</a>
    </div>

我知道还有一个 data-customcss 实现，所以理论上我们可以通过 .css 实现它，也可以使用照片图标的 url 链接，但我不知道如何使用 angular

目前 data-customcss="csszzz" 并没有做任何事情作为一个有针对性的 css 类，例如。.csszzz

如何在 React 组件中使用 Materialize css 中的 DropDown？当我点击按钮时，没有下拉内容我的代码如下：

import React , {Component} from 'react';
import 'materialize-css';

export default class extends Component{
      openDropDown(){
          $('.dropdown-button').dropdown({
                  inDuration: 300,
                  outDuration: 225,
                  constrainWidth: false, // Does not change width of dropdown to that of the activator
                  hover: true, // Activate on hover
                  gutter: 0, // Spacing from edge
                  belowOrigin: false, // Displays dropdown below the button
                  alignment: 'left', // Displays dropdown with edge aligned to the left of button
                  stopPropagation: false // Stops event propagation
              } …

我已经阅读了很多关于这个主题的问题，也阅读了 React 的文档，但我仍然不知道这一点。我无法让输入字段在单击或更改时发出任何内容（事件）。

我的代码在下面，除了使用 materialzecss，我使用的是基本的 HTML/JSX 而没有其他 javascript。

我只是无法更新输入以在 onChange 或 onClick 上的选中/未选中之间切换。谁能告诉我我哪里出错了？

import React, { Component } from 'react'
import Alert from '../components/shared/Alert'
import { Redirect } from 'react-router-dom'
import axios from 'axios'

class Create extends Component {
  constructor(){
    super()
    this.state = {
      redirect:false,
      alert:{
        show: false
      },
      checked:true
    }
  }

  handleChange(event) {
    this.setState({
      recipe : {[event.target.name]: event.target.value}
    })
    console.log(this.state);

  }

  handleSubmit(event) {

  }


  render() {
    const { redirect } = this.state;
    const showAlert = this.state.alert.show;
     if (redirect) { …

我正在将 Angular 5 与 Materialise 一起使用，并且我有一个完美运行的日期选择器：

<input materialize="pickadate" 
 type="text" class="datepicker" placeholder="Selecione a Data" 
 [materializeParams]=datePickerParams>

我想在更改此输入日期时调用诸如“dateChanged(date)”之类的方法，例如，我尝试使用 (change)="dateChanged($event)"，但不起作用。

下图显示了我的表格，其中数据是动态设置的。例如，它可以有 2,3,4 ... 列。

我的 html 代码如下：<thead>包含标题值，并tbody包含可以修改的值。

<table class="table-conf">
    <thead>
       <tr>
           <th *ngFor="let data of jsonText[0]" style="text-align: center;">{{data}}</th>
       </tr>
    </thead>
    <tbody>
       <tr *ngFor="let data of jsonText; let i=index">
         <ng-container *ngIf="i!=0">
             <td class="padding-table" *ngFor="let dt of data; let j=index">
                 <input style="text-align: center;" [(ngModel)]="jsonText[i][j]">
             </td>
         </ng-container>
       </tr>
    </tbody>
</table>

以下是jsonText我迭代的变量示例：

jsonText Array(6)
     0: (2) ["Task", "Hours per Day"]
     1: (2) ["Work", 11]
     2: (2) ["Eat", 2]
     3: (2) ["Commute", 2]
     4: (2) ["Watch TV", 2]
     5: …