标签: materialize

实现CSS - 选择看起来不像渲染

我目前正在使用物化CSS,似乎我已经遇到了选择字段.

我正在使用他们网站提供的示例,但不幸的是它在视图中呈现.我想知道其他人是否能够提供帮助.

我想要做的是创建一个带有2个提供填充的端部垫片的行 - 然后在内部的两个行项目中应该有一个搜索文本输入和一个搜索选择下拉列表.

这是我正在使用的示例:http://materializecss.com/forms.html

先感谢您.

这是有问题的代码片段.

<div class="row">
<form class="col s12">
    <div class="row">
        <div class="input-field col s2"></div>
        <div class="input-field col s5">
            <input id="icon_prefix" type="text" class="validate" />
            <label for="icon_prefix">Search</label>
        </div>
        <div class="input-field col s3">
            <label>Materialize Select</label>
            <select>
                <option value="" disabled="disabled" selected="selected">Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <div class="input-field col s2"></div>
    </div>
</form>
Run Code Online (Sandbox Code Playgroud)

html javascript css materialize

114
推荐指数
5
解决办法
10万
查看次数

如何离线托管素材图标?

如果这是一个非常简单的问题我很抱歉,但是你如何使用没有的谷歌材料图标

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
Run Code Online (Sandbox Code Playgroud)

我希望我的应用程序能够显示图标,即使用户没有互联网连接

javascript html5 materialize cordova

88
推荐指数
10
解决办法
7万
查看次数

是否可以将MaterialiseCss集成到Bootstrap中

我问自己(未经测试)是否可以将bootstrapmaterializecss集成到同一个项目中

由于两个框架都是出于同样的目的,并且可能在某些类定义中重叠等,所以仍然可以将两个框架组合起来以扩展我的样式选项吗?

css css-frameworks materialize web twitter-bootstrap

34
推荐指数
2
解决办法
4万
查看次数

如何在React中使用materialize-css?

我有一个使用ES6模块的Meteor/React项目.我已经使用npm安装了materialize-css,但我不确定如何在我的JSX代码中实际使用Materialize类.我应该从materialize-css导入什么?或者我只需要将CSS包含在我的主index.html文件中?

我主要想要它用于网格系统,因为我将使用material-ui作为实际的UI组件.

materialize npm reactjs material-ui

33
推荐指数
7
解决办法
4万
查看次数

如何在materialize css框架中动态修改<select>

我刚开始使用materialize css框架.现在,materialize将任何select标签转换为ul和li元素的集合.之前,使用JQuery,我能够做到这一点:

var $selectDropdown = $("#dropdownid");
$selectDropdown.empty();
$selectDropdown.html(' ');
var value = "some value";
$selectDropdown .append($("<option></option>").attr("value",value).text(value));
Run Code Online (Sandbox Code Playgroud)

我的html只是一个示例选择标记:

以前,这是有效的.现在它失败了.使用javascript动态重新填充此下拉列表的替代方法是什么?

javascript css jquery materialize

29
推荐指数
3
解决办法
6万
查看次数

实现CSS - 粘滞页脚

我按照这里提到的步骤 - http://materializecss.com/footer.html - 创建了一个Sticky Footer,但结果并不像预期的那样.

我将以下代码复制粘贴到materialize.min.css文件中:

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }
Run Code Online (Sandbox Code Playgroud)

css materialize material-design

25
推荐指数
4
解决办法
2万
查看次数

角度材料VS Materialisecss

嗯,大约一个星期我正在尝试使用Angular Material运行应用程序.
在使用Angular Material及其神经破坏虫之后面临如此巨大的挑战(由于它们的角色V2尽快释放V2的里程碑可能永远无法解决),现在它让我大吃一惊,为什么我必须使用616KB JS+CSSAngular Material模块代替的254KB JS+CSSMaterializecss.
据我所知(告诉我,如果我错了!):

最好尽量避免更改DOM元素

但Angular材料基础是导致大量回流/重新涂饰的指令,实际上基于我看到的演示,Materialisecss比Angular Material更快更轻.
这显然是Angular Material更具角度友好性,并且具有一些特殊功能,例如$mdThemingProvider......,但我对使用Angular Material或其性能表示怀疑.
有什么话要让我再次相信Angular Material?
是否值得使用Angular Material而不是纯Angular + Materialisecss?
因为我看不出它们的结果有什么重大变化?

javascript materialize angularjs material-design angular-material

24
推荐指数
3
解决办法
8596
查看次数

如何在Materialise中更改颜色图标?

我使用css框架Materialize.css我不明白我的HTML图标中的过去颜色

<i class="large material-icons">note_add</i>
Run Code Online (Sandbox Code Playgroud)

我试过了 cyan darken-4

<i class="large material-icons cyan darken-4">note_add</i>
Run Code Online (Sandbox Code Playgroud)

但没有成功,我需要改变颜色图标.怎么做?

css materialize

21
推荐指数
4
解决办法
4万
查看次数

如何在materializecss中创建响应式Breadcrumb?

小型或移动屏幕面包屑全屏面包屑我正在使用materializecss作为前端在我的jsp页面中,我使用Breadcrumbs在页面顶部显示信息它工作正常但是每当我在移动浏览器或小屏幕上看到我的页面时,整个Breadcrumbs都没有显示.那么如何提出任何建议?

<div class="section" style="padding-bottom:0;">
            <div class="row">
                <nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;">
                    <a class="breadcrumb" href="<c:url value="/"/>">Home</a>
                    <a class="breadcrumb" href="<c:url value="/${currentCityName}"/>">${currentCity.name}</a>
                    <c:forEach items="${breadCategories}" var="c">
                        <c:set var="puri"><catalog:CategoryUri category="${c}"/></c:set>
                        <a class="breadcrumb" href="<c:url value="/${currentCityName}${puri}"/>">${c.name}</a>
                    </c:forEach>                
                    <a class="breadcrumb" href="javascript:;">${product.name}</a>
                </nav>                   
            </div>
        </div>
Run Code Online (Sandbox Code Playgroud)

html css jsp materialize

21
推荐指数
1
解决办法
2470
查看次数

实现css - 改变吐司对话框的位置

我正在使用Materialise css(www.materializecss.com).想要改变吐司对话的位置.在较小的屏幕中,它处于适当的位置.对于宽屏幕和盒子布局,它会从我的布局中转到右上角.(http://materializecss.com/dialogs.html)

当吐司被触发时,它会<div id="toast-container"></div>在身体中附加" ".我不想把它贴在身上.我希望它在特定的div中.

html javascript css html5 materialize

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