标签: materialize

我正在使用Materialise处理一个Meteor项目.我可以很好地实现可折叠元素

但是当我尝试创建嵌套的Collapsibles时,它看起来并不正确(请注意上方和下方的间距,更不用说缺少通常表示嵌套列表的缩进).这是物化的缺点还是我的尝试有缺陷？

我试图用示例代码实现它

<ul class="collapsible" data-collapsible="accordion">
        <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
            <div class="collapsible-body">
              <ul class="collapsible" data-collapsible="accordion">
                <li>
                    <div class="collapsible-header"><i class="material-icons">filter_drama</i>Nested First</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                </li>
                <li>
                    <div class="collapsible-header"><i class="material-icons">place</i>Nested Second</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                </li>
                <li>
                    <div class="collapsible-header"><i class="material-icons">whatshot</i>Nested Third</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                </li>
               </ul>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
            <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
            <div class="collapsible-body"><p>Lorem ipsum dolor sit …

我一直在解决以下问题...我有一个基本和功能的rails应用程序来记录事件,我使用脚手架来构建模型和所有,用户可以记录事件与他们的日期时间,一切正常.但是,只要我将"Materialise"添加到应用程序,它就会打破表单中的所有日期时间,日期和时间选择器.

在Materialise之后,我的表单中由Rails生成的datetime_selector根本不可操作,它们看起来很奇怪(包括截图)

- 如果我手动安装gem或者用bower安装它,就会发生这种情况.我知道,materialze为date_selectors提供了一个特殊的"datepicker"类.使用它没有任何区别.

- 我没有其他CSS应用于我的表单(我删除了所有scaffolds.css).如果我尝试手动应用材质设计样式,表单确实有效,但我不能使用Materialise.

有关为什么会发生这种情况以及如何解决问题的想法？

截图:

<%= form_for(@event) do |f| %>
  <% if @event.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2>

      <ul>
      <% @event.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :datetime %><br>
    <%= f.datetime_select :datetime, class: "datepicker" %>
  </div>
  <div class="field">
    <%= f.label :date %><br>
    <%= f.date_select …

我正在使用Materialise.js(Materialisecss Framework)来开发响应式HTML页面.我想为我的要求设置一个确认对话框,但Meterialize.js不支持它.是Materialise.js没有确认对话框还是我找不到它？我怎样才能在Materialise.js中实现这一目标？

我正在查看MaterialiseCSS展示(materializecss.com/showcase.html),我看到了一个我想要整合到我的网站中的功能.我希望能够制作卡片,图片,按钮等能够重叠两个div(或部分​​).

例如:http: //prntscr.com/bezcgo 或http://prntscr.com/bezd7s或prntscr.com/bezdvx

显然这张照片与现场网站不同,但我想要的是同样的想法.在第一张图片中,"hyperAPI"图片与蓝色和白色部分重叠.对于第二张图片,黄色向下箭头与蓝色和白色重叠.第三,红色向下箭头与浅蓝色和白色区域重叠.

只是澄清一下,我想知道如何使用MaterialiseCSS框架(materializecss.com)来做到这一点.

谢谢!此外,我不能发布超过两个链接,所以我不得不打破他们(对不起D :)!

我正在为我的新项目使用materialize css.我有一个简单的模拟我想到的页面.这就是我想要的.上面的导航栏和侧面板不应该隐藏.

我已经尝试更改物化的CSS以获得侧导航栏,但无济于事.我改变了

@media only screen and (max-width: 992px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}

至

@media only screen and (max-width: 2000px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}

我也尝试更改.js文件,但它也没有用.我已经减少了普通导航栏的大小,超过line-height了nav 的属性.是否可以将导航栏放在一起？如果没有,我怎么能得到一个侧面板.我只需要侧面板显示4个图标,这些图标将有工具提示,点击后会加载模态.我尝试使用materializecss的网格机制但是无法得到我想要的东西.

任何帮助将非常感激.

谢谢.

我想使用materialize css创建一个警报.我不知道怎么回事.请帮忙.我只是想创建一个简单的html,它将显示一个警告错误,而不使用javascript.谢谢.

如何更改Materialize CSS中所有导航栏链接（包括品牌徽标）的文本颜色。我尝试添加“黑色文字”，但仅适用于品牌徽标。例如，

<a id="logo-container" href="#" class="brand-logo black-text">
    My Logo
</a>

<ul class="right hide-on-med-and-down black-text">
    <li><a href=#">Link 1</a> 
</li></ul>

同样，“黑色文字”仅适用于徽标。

如何在实现CSS中更改面包屑文本和箭头的颜色。我可以通过应用适当的类来做到这一点，但是我无法更改面包屑中箭头标记的颜色。

我搜索了与此相当的Materialize UI的高低(在较轻的MUI CSS中的示例): -

https://www.muicss.com/docs/v1/example-layouts/responsive-side-menu

例如在桌面上看起来像这样(能够通过汉堡图标显示/隐藏菜单): -

但在移动设备上看起来像这样: -

我只想关闭阴影。我可以通过带有检查功能并关闭所有框阴影类的浏览器来实现它，但是我不知道如何从html / css代码中做到这一点。

码：

<div class="navbar-fixed"> 
<nav class="navbar-transition cool-navbar ">
    <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>
</div>